Angular使用@ngx-translate切换语言仅生效一次，如何实现对象多语言翻译

1. 核心错误原因 #

你在switchLang方法中错误使用了translate.use()方法：该方法的作用是设置要使用的语言，返回值为Observable对象，不是布尔值，因此你的if(this.translate.use('en'))判断永远为真，导致translateEn变量状态不会随选择正确变更，才会出现切换一次后无法切回的问题，本质不是下拉变更事件没触发，是状态赋值逻辑错误。

2. 修复后的代码 #

room.component.ts 修改 #

// 组件初始化逻辑放在constructor或者ngOnInit中
constructor(public translate: TranslateService) {
  this.translate.addLangs(['en', 'es']);
  this.translate.setDefaultLang('en');
  // 初始化状态，默认英语对应translateEn设为false
  this.translateEn = false;
}

switchLang(language: string) {
  this.translate.use(language);
  // 直接根据传入的选中语言设置状态，不要调用translate.use做判断
  if(language === 'en') {
    this.translateEn = false;
  } else if(language === 'es') {
    this.translateEn = true;
  }
}

public translateEn:boolean;

room.component.html 可选优化 #

你可以完全不用维护translateEn变量，直接用translate服务的currentLang属性判断，减少冗余变量，代码更简洁：

<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>

<!-- 直接用currentLang判断，不需要额外维护变量和ng-template -->
<h4>{{ translate.currentLang === 'es' ? room.titleEs : room.title }}</h4>

内容的提问来源于stack exchange，提问作者Rafael Hernández