NGX-Translate 不能与 Angular Material mat-select 一起使用？

Question

我正在使用 Angular 9.1 我已经用 NGX-translate 完成了这个来选择网站的语言：

<label class="mr-3"> {{'HEADER.CHOOSE' | translate}}
  <select #langselect (change)="translate.use(langselect.value)">
    <option *ngFor="let lang of translate.getLangs()" [value]="lang">{{ lang }}</option>
  </select>
</label>

有效。

但是当我用 Material 做同样的事情时，它显示正常但翻译不起作用。

<mat-form-field>
  <mat-label>{{'HEADER.CHOOSE' | translate}}</mat-label>
  <mat-select #langselect (change)="translate.use(langselect.value)">
    <mat-option *ngFor="let lang of translate.getLangs()" [value]="lang">
      {{ lang }}
    </mat-option>
  </mat-select>
</mat-form-field>

这是我的TS：

export class LangSelectorComponent {
  constructor(public translate: TranslateService) {
    translate.setDefaultLang('english');
    translate.use('english');
    translate.addLangs(['english','francais']);
  }
}

是我的代码有问题还是与 Material 和 NGX 的兼容性有问题？

谢谢。

Answer 1

<mat-select> 没有 (change) 输出。您可以使用 (selectionChange) 作为现有代码中的精确替换。

（或者您可能想考虑通过添加 [(ngModel)] or formControlName 来使用 ControlValueAccessor 接口，并将 select 直接绑定到组件代码中的 setter。）

这是一个有效的 StackBlitz 示例： https://stackblitz.com/edit/angular-ivy-reoyvd?file=src%2Fapp%2Fapp.component.html （<- material 设计出于某种原因有点偏离，但切换有效）

Answer 2

<mat-form-field appearance="fill">
  <mat-label>Language</mat-label>
  <mat-select
    #selectedLang
    [value]="translate.currentLang"
    (selectionChange)="translate.use(selectedLang.value)"
  >
    <mat-option *ngFor="let lang of translate.getLangs()" [value]="lang">
      {{ lang }}
    </mat-option>
  </mat-select>
</mat-form-field>

NGX-Translate 不能与 Angular Material mat-select 一起使用？

NGX-Translate not working with Angular Material mat-select?

angular-material

ngx-translate

angular