如何从语言环境动态导入？

Question

我正在构建一个 Angular 5 应用程序。我的用户可以在我的应用中选择他们想要的任何文化。我真的应该把“语言环境”路径硬编码吗？如果是这样，我应该将它们都包括在内（以防万一）。

import localeFr from '@angular/common/locales/fr';
registerLocaleData(localeFr, 'fr');
import localePt from '@angular/common/locales/pt';
registerLocaleData(localePt, 'pt');
...

我想要这样的东西：

import locale from '@angular/common/locales/' + varUserLocale;
registerLocaleData(locale);

我怎样才能让它像我的例子一样更有活力？

谢谢

Answer 1

export interface ILanguageOption {
  languageId: number;
  name: string;
  value: string;
  priority: number;
  import: string;
}

  public static readonly LANGUAGES: ILanguageOption[] = [
    { languageId: 2, name: 'RU', value: 'ru-RU', priority: 2, import: 'ru' },
    { languageId: 1, name: 'EN', value: 'en-UK', priority: 1, import: 'en-GB' }
  ];

在 app.modele.ts 中

import { registerLocaleData } from '@angular/common';

export function localeInitializerFactory(): () => Promise<any> {
  return () => {
    const all = Consts.LANGUAGES.map(l => {
      Promise.all([
        import(/* webpackInclude: /(ru|en-GB)\.js$/ */ `@angular/common/locales/${l.import}.js`),
        import(/* webpackInclude: /(ru|en-GB)\.js$/ */ `@angular/common/locales/extra/${l.import}.js`)
      ]).then(imp => registerLocaleData(imp[0].default, l.value, imp[1].default));
    });
    return Promise.all(all);
  }
}

{
  provide: APP_INITIALIZER,
  useFactory: localeInitializerFactory,
  multi: true
},

Answer 2

你试过了吗？

import(@angular/common/locales/${navigator.language}.js).then(locale => { registerLocaleData(locale.default); });

来源：Angular 5 loading locale at runtime with Angular CLI