angular - i18n 应用加载后切换区域设置一次

Question

对于多语言网站，我使用以下技术在应用程序中动态切换语言。这是正确的方法吗？

有时，页面加载结束，not-found甚至回到登录页面。

main.ts

declare const require;
var translations = require(`raw-loader!./locale/messages.xlf`);

switch(localStorage.getItem("lang"))
{
  case("ta"):
  {
    translations = require(`raw-loader!./locale/messages.ta.xlf`);
    break;
  }
  case("fr"):
  {
    translations = require(`raw-loader!./locale/messages.fr.xlf`);
    break;
  }
  default:
      translations = 'en';
}

platformBrowserDynamic().bootstrapModule(AppModule, {

  providers: [
    {provide: TRANSLATIONS, useValue: translations},
    {provide: TRANSLATIONS_FORMAT, useValue: 'xlf'},
  ]

})
  .catch(err => console.error(err));

app.module.ts

var locale = localStorage.getItem("lang")

if (!locale) locale = "en"


providers: [

    { provide: LOCALE_ID, useValue: locale },
    { provide: "BASE_API_URL", useValue: environment.baseUrl},
  ]

在设置页面中，选择语言并重定向回主页。

<mat-select [formControl]="language">
   <mat-option value="ta">Tamil</mat-option>
   <mat-option value="en">English</mat-option>
   <mat-option value="fr">French</mat-option>
</mat-select>

localStorage.setItem('lang', formValue.language)
//this.router.onSameUrlNavigation = 'reload'
this.router.navigate(['/home'])

标签： angularinternationalizationangular7angular-i18n