web-dev-qa-db-fra.com

angular 5 changer dynamiquement les paramètres régionaux pour i18n

J'essaie de changer dynamiquement les paramètres régionaux pour changer la langue i18n. J'ai deux fichiers, l'un avec des valeurs anglaises et l'autre avec des valeurs françaises.

Ce que j'ai essayé pour l'instant, c'est quelque chose comme ça:

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

mais cela m'a donné l'erreur suivante:

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

Avez-vous des idées sur la façon de passer de l'anglais au français de manière dynamique? : /

angularinternationalizationlocaleangular-i18n
7
j0w

Eh bien, je ne suis pas sûr que ce soit une bonne solution, mais voici ce que j'ai fait. Cela fonctionne pour mon but alors peut-être que cela peut aider quelqu'un d'autre.

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

en code 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>

dans component.ts:

changeLang(lang: string) {

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

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

ne me criez pas dessus, je suis juste un débutant avec angular ^^

6
j0w