即时翻译的 ngx-translate 问题答案

【问题标题】：ngx-translate issue with translate instant即时翻译的 ngx-translate 问题
【发布时间】：2019-03-28 15:51:03
【问题描述】：

我在 Angular(v6) 中使用 ngx-translate 和延迟加载方法。我遇到了translate.instant('Title') 的问题

使用翻译管道可以正常工作。({{'Title' | translate}})

使用translate.instant() 方法默认语言始终有效，但我无法通过共享模块中的语言选择器（用于切换语言的选择组件）更改语言。

我不想每次都使用this.translate.onLangChange.subscribe，有没有其他方法可以使用这个方法？

【问题讨论】：

我不想每次都使用 this.translate.onLangChange.subscribe。还有其他方法吗？

标签： angular angular6 ngx-translate

【解决方案1】：

使用 translate.stream('Title') 而不是 translate.instant('Title')。它返回一个 Observable。

另见https://github.com/ngx-translate/core

它是如何工作的：

import {Component} from '@angular/core';
import {TranslateService} from '@ngx-translate/core';
import {Observable} from 'rxjs';

@Component({
  selector: 'app-root',
  template: `
    <div>
      <h2>{{ 'HOME.TITLE' | translate }}</h2>
      <label>
        {{ 'HOME.SELECT' | translate }}
        <select #langSelect (change)="translate.use(langSelect.value)">
          <option *ngFor="let lang of translate.getLangs()" [value]="lang" [selected]="lang === translate.currentLang">{{ lang }}</option>
        </select>
      </label>
      <ng-container *ngIf="name$ | async as name">
        <p>Observable {{ name }}</p>
      </ng-container>
    </div>
  `,
})
export class AppComponent {
  public name$: Observable<string>;

  constructor(public translate: TranslateService) {
    translate.addLangs(['en', 'fr']);
    translate.setDefaultLang('en');

    const browserLang = translate.getBrowserLang();
    translate.use(browserLang.match(/en|fr/) ? browserLang : 'en');
  }

  public ngOnInit(): void {
    this.name$ = this.translate.stream('HOME.TITLE');
  }
}

这里是 stackblitz 演示的链接：https://stackblitz.com/edit/github-az4kgy

【讨论】：

是否可以使用与 translate.instant('key') 相同的方式？
我正在使用共享选择器组件来切换语言> 默认情况下，即时工作为“英语”，但是当我切换到另一种语言时，使用管道工程进行翻译并且即时失败。
原因是instant返回的是字符串而不是Observable。
我添加了一个例子。
感谢您付出这么多努力。但在我的情况下，语言选择是从共享模块中进行的。 ao 即时和流不听变化。

【解决方案2】：

它始终使用默认语言。这是主要问题。解决办法是：

this.translateService.onLangChange.subscribe((event: TranslationChangeEvent) => {
      this.translateService.setDefaultLang(event.lang);
    });

【讨论】：

它对我不起作用，我尝试更改默认语言，但即时方法仍然以先前选择的语言而不是新语言显示语言。