你如何让 ngx-translate 与 angular material 一起工作

Question

我是 Angular 的新手，有一个 angular 应用程序 13.3.6，angular material 13.3.6 和 ngx-translate 14.0.0。我使用 mat-option select 我的语言，但是当我点击它们时，它们不会改变网站的语言。

我的翻译服务是这样的：

export class TranslatorService implements OnInit {

  constructor(public translate: TranslateService, private http: HttpClient) {
    translate.addLangs(['nl', 'fr', 'en']);
    translate.setDefaultLang('nl');
    const browserLang: any = translate.getBrowserLang();
    translate.use(browserLang.match(/nl|fr|en/) ? browserLang : 'nl');
  }

  // eslint-disable-next-line @angular-eslint/contextual-lifecycle
  ngOnInit(): void {
    this.translate.addLangs(['nl', 'fr', 'en']);
    this.translate.setDefaultLang('nl');

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

我在组件中的实现是这样的：

<mat-select class="lang-selector__dropdown" [(ngModel)]="translate.use">
  <mat-option *ngFor="let lang of translate.getLangs()" [value]="translate.use">{{ lang | uppercase }}</mat-option>
</mat-select>

Answer 1

您的代码的第一个问题是您将每个选项的 value 设置为静态函数 translate.use，这无法工作。相反，您想将值设置为语言，以便在选项获得 selected 时可以使用它。

第二个问题是，您将 select 的 [(ngModel)] 设置为 translate.use。我不知道这是做什么的，但它绝对不会改变语言。相反，您可以监听 selectionChange 事件并调用 translate.use() 以防它被触发。

最终代码：

<mat-select class="lang-selector__dropdown (selectionChange)="translate.use($event.value)">
  <mat-option *ngFor="let lang of translate.getLangs()" [value]="lang">{{ lang | uppercase }}</mat-option>
</mat-select>

你如何让 ngx-translate 与 angular material 一起工作

How do you get ngx-translate work with angular material

angular

angular-material

ngx-translate