我正在尝试动态更改语言环境以更改i18n语言。 我有两个文件,一个具有英语值,另一个具有法语值。
我现在尝试的是这样的:
ngOnInit() {
const localeName = localStorage.getItem('locale') || 'fr';
import(`@angular/common/locales/${localeName}.js`).then(locale => {
registerLocaleData(locale.default);
});
}
但是它给了我以下错误:
error TS1323: Dynamic import cannot be used when targeting ECMAScript 2015 modules.
关于如何从英语动态转换为法语的任何想法? :/
答案 0 :(得分:5)
好吧,不确定这是否是一个好的解决方案,但这就是我所做的。它可以达到我的目的,因此也许可以帮助其他人。
在main.ts中:
if (localStorage.getItem('locale') === null) {
localStorage.setItem('locale', 'en');
}
const locale = localStorage.getItem('locale');
declare const require;
const translations = require(`raw-loader!./locale/messages.${locale}.xlf`);
platformBrowserDynamic().bootstrapModule(AppModule, {
providers: [
{provide: TRANSLATIONS, useValue: translations},
{provide: TRANSLATIONS_FORMAT, useValue: 'xlf'}
]
});
以html代码显示:
<a mat-menu-item href="" (click)="changeLang('fr')">
<mat-icon>settings</mat-icon>
<span>FR</span>
</a>
<a mat-menu-item href="" (click)="changeLang('en')">
<mat-icon>settings</mat-icon>
<span>EN</span>
</a>
在component.ts中:
changeLang(lang: string) {
if (lang === 'fr') {
localStorage.setItem('locale', 'fr');
}
if (lang === 'en') {
localStorage.setItem('locale', 'en');
}
}
别对我大吼,我只是一个有角^^
的新手