web-dev-qa-db-ja.com

angular 5 i18nのロケールを動的に変更する

ロケールを動的に変更してi18n言語を変更しようとしています。英語の値を持つファイルとフランス語の値を持つファイルの2つのファイルがあります。

私が今試したのはそのようなものです：

 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.

英語からフランス語に動的に切り替える方法に関するアイデアはありますか？ ：/

angularinternationalizationlocaleangular-i18n
7
j0w

まあ、それが良い解決策かどうかはわかりませんが、私がやったことはここにあります。私の目的のために機能するので、おそらく他の人を助けることができます。

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 ^^の初心者です

6
j0w