我想更改特定组件/当前组件的区域设置

Question

我正在开发一个 Angular 17 应用程序，我在其中实现了 i18n 以实现国际化。最初，我将阿拉伯语设置为整个应用程序的默认语言。现在，我需要根据某些条件将特定组件切换为英语。有人可以指导我如何实现这一目标吗？ 谢谢你

  public sidebarShow: boolean = false;
  setLang = 1; // Assuming setLang is set based on some condition

  constructor(@Inject(LOCALE_ID) public locale: string,
  private cdr: ChangeDetectorRef) {
  }

  ngOnInit(): void {
   this.setLocale();
  }
  setLocale(): void {
    if (this.setLang === 1) 
    {
      // Set English locale
      this.locale = 'en-US';
      console.log(this.locale)
    } else {
      // Set Arabic locale
      this.locale = 'ar-SA';
      console.log(this.locale);
    }
    this.cdr.detectChanges(); // Trigger change detection
  }  

<div >
    <div class="bg-primary" > 
        <h1  i18n>Features sections</h1>
        <p i18n>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora excepturi, ducimus repudiandae aspernatur molestias accusantium debitis iusto praesentium voluptate error mollitia pariatur fugit qui ut deserunt quod rem magnam hic!</p>
        <p i18n>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora excepturi, ducimus repudiandae aspernatur molestias accusantium debitis iusto praesentium voluptate error mollitia pariatur fugit qui ut deserunt quod rem magnam hic!</p>
        <p i18n>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora excepturi, ducimus repudiandae aspernatur molestias accusantium debitis iusto praesentium voluptate error mollitia pariatur fugit qui ut deserunt quod rem magnam hic!</p>
    </div>
</div>

<div> 
    <h1 i18n>Blogs sections</h1>
    <p i18n>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora excepturi, ducimus repudiandae aspernatur molestias accusantium debitis iusto praesentium voluptate error mollitia pariatur fugit qui ut deserunt quod rem magnam hic!</p>
    <p i18n>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora excepturi, ducimus repudiandae aspernatur molestias accusantium debitis iusto praesentium voluptate error mollitia pariatur fugit qui ut deserunt quod rem magnam hic!</p>
    <p i18n>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora excepturi, ducimus repudiandae aspernatur molestias accusantium debitis iusto praesentium voluptate error mollitia pariatur fugit qui ut deserunt quod rem magnam hic!</p>
</div>

Answer 1

Angular i18n 无法为应用程序的子集切换语言，因为翻译已提前编译到分发包中。

可以使用 Angular i18n 在运行时加载翻译，但这仍然需要硬重新加载，即使这样，你也无法为特定组件设置另一种语言。

要实现此行为，请使用例如 transloco。