你如何让 ngx-translate 与 angular material 一起工作
How do you get ngx-translate work with angular material
我是 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>
您的代码的第一个问题是您将每个选项的 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>
我是 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>
您的代码的第一个问题是您将每个选项的 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>