我如何使用@ngx-translate 翻译 angular 中的对象

Question

我有一个对象有两种语言：西班牙语和英语我可以翻译对象 1 次，默认情况下它是英语，我可以从英语翻译成西班牙语但后来我不能再用英语翻译等等。 ..

room.component.html

<ul class="navbar-nav  navbar-right">
                <span class="form-inline">
                    <select 
                        class="form-control" 
                        #selectedLang 
                        (change)="switchLang(selectedLang.value)">
                      <option *ngFor="let language of translate.getLangs()" 
                        [value]="language"
                        [selected]="language === translate.currentLang">
                        {{ language }}
                      </option>
                    </select>
                  </span>

            </ul>

      <div *ngIf="translateEn == true; then thenBlock else elseBlock"></div>
<ng-template #thenBlock>     <h4>{{ room.titleEs }}</h4></ng-template>
<ng-template #elseBlock> <h4>{{ room.title }}</h4></ng-template>

room.component.ts

 switchLang(language: string) {
    this.translate.use(language);
   // this.cdRef.markForCheck();
  //  this.cdRef.detectChanges();
    if(this.translate.use('en'))
    {
      this.translateEn = true;
    }
    else if(this.translate.use('es'))
    {
      this.translateEn = false;
    }

 translate.addLangs(['en', 'es']);
    translate.setDefaultLang('en');

  public translateEn:boolean;

我必须检测 select {{ language }} 中的变化我尝试使用 onChanges 但没有用，也没有用 ChangeDetectorRef....

Answer 1

问题出在您的 switchLang 函数中，该函数检查所选语言可能不是使用 this.translate.use 函数。

this.translate.use 用于更改语言，而不是检查选择了哪一个，无论如何它 returns 是一个可观察的而不是布尔值。

因此，如果您想正确检查它，则必须使用 this.translate.currentLang 或在您的情况下仅使用 language 参数。

尝试以下操作：

switchLang(language: string) {
    this.translate.use(language);
    this.translateEn = language === 'en';
}

注意：没有必要每个语言都使用两个键，只能在两个语言的翻译文件中使用相同的键，然后使用translate 管道根据 currentLang.

获取正确的值

我如何使用@ngx-translate 翻译 angular 中的对象

how I can translate an object in angular using @ngx-translate

ngx-translate

angular