Angular 5 动态更改国际化语言（i18n）

Question

我想动态更改本地化以更改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.

有什么办法可以实现动态切换英语和法语？ :/

- j0w

---

可能是Angular 2 i18n动态/即时翻译的重复问题。 - ibenjelloun

不确定是否重复，但感谢提供链接，我可能会错过这个。另外：那里提出的解决方案对我无效。它可以编译，但没有任何作用。 - j0w

Answer 1

嗯，不确定这是否是一个好的解决方案，但以下是我所做的事情。它对我的目的有效，也许可以帮助其他人。

在 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');
    }
  }

不要对我大喊大叫，我只是一个刚入门的Angular新手 ^_^

- j0w

---

嗨，我刚花了几个小时研究了一个类似的问题，并理解了标准i18n和页面“热”翻译之间的主要区别，我认为使用https://github.com/ngx-translate/core可以实现更好的结果。 - Camilo Casadiego