I18n的angular 5动态更改语言环境 [英] angular 5 change locale dynamically for i18n

问题描述

我正在尝试动态更改语言环境以更改i18n语言. 我有两个文件，一个具有英语值，另一个具有法语值.

I am trying to change locale dynamically to change i18n language. I have two files, the one with english values and the other one with french values.

我现在尝试的是这样的:

What I've tried for now is something like that :

 ngOnInit() {
    const localeName = localStorage.getItem('locale') || 'fr';
    import(`@angular/common/locales/${localeName}.js`).then(locale => {
      registerLocaleData(locale.default);
    });
  }

但是它给了我以下错误:

but it gave me the following error :

error TS1323: Dynamic import cannot be used when targeting ECMAScript 2015 modules.

关于如何动态地从英语切换到法语的任何想法? :/

Any ideas on how I can switch from english to french dynamically? :/

推荐答案

好吧，不确定这是否是一个好的解决方案，但这就是我所做的.它可以达到我的目的，因此也许可以帮助其他人.

Well, not sure it's a good solution but here's what i've done. It works for my purpose so maybe it can help someone else.

在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中:

in component.ts :

changeLang(lang: string) {

    if (lang === 'fr') {
      localStorage.setItem('locale', 'fr');
    }

    if (lang === 'en') {
      localStorage.setItem('locale', 'en');
    }
  }

别对我大喊大叫，我只是一个有角^^

don't yell at me, i'm just a newbie with angular ^^

这篇关于I18n的angular 5动态更改语言环境的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！