Angular 5管道和动态语言环境

Question

我目前在angular 4中内置了应用程序，并希望升级到angular 5。我读到了他们是如何在管道中处理区域设置的，似乎升级不再是一个选项。据我所知，他们希望您1.手动导入不同的文化2.为每个文化构建单独的应用程序

问题是我在一家国际公司工作，该公司支持351种不同的文化，我们有15个应用程序。angular团队真的是说，如果我想像他们一样不断升级，我现在必须构建5265个不同的应用程序吗？如果我带着这个去找我的老板，我可能会被赶出房间。

在我们的angularJs应用程序中，我们只是在用户登录并设置提供者时下载了运行时所需的$locale服务。Angular没有这样的东西吗？如果不是，我不确定企业级应用程序如何使用这种语言，除非开发人员足够幸运，只需要支持一种文化。

Answer 1

在github上就这个问题进行交流后，一个已经开始使用的想法是创建一个我在APP_INITIALIZER中调用的服务，您可以在下面看到。由于构建时的动态字符串，angular-cli将为每个区域性创建一个块，然后在运行时加载正确的块，一旦我提供了从服务调用中收到的区域性字符串。

setLocale(localeId: string): Promise<any> {
    this.culture = localeId;
    return new Promise((resolve, reject) => {
      System.import(`@angular/common/locales/${localeId}.js`).then(
        module => {
          registerLocaleData(module.default);
          resolve();
        },
        () => {
          System.import(`@angular/common/locales/${localeId.split('-')[0]}.js`).then(module => {
            registerLocaleData(module.default);
            resolve();
          }, reject);
        }
      );
    });
  }

Answer 2

我在angular4上遇到了同样的问题，我想在多语言中使用它。这是我所做的：

简单的管道包装来设置语言环境。

@Pipe({name: 'datepipe', pure: true})
export class MyDatePipe extends DatePipe implements PipeTransform {
  constructor(private win: WindowRef) {
    super(win.ln);
  }

  transform(value: any, pattern?: string): string | null {
    return super.transform(value, pattern);
  }
}

区域设置的服务：

function _window(): any {
  // return the global native browser window object
  return window;
}

@Injectable()
export class WindowRef {
  get nativeWindow(): any {
    return _window();
  }

  //default locale
  public ln = 'en';


  constructor() {
    try {
       if (!isNullOrUndefined(this.nativeWindow.navigator.language) && this.nativeWindow.navigator.language !== '') {
        this.ln = this.nativeWindow.navigator.language;
      }
    }finally {}
  }
}

这对angular4有效，但对于angular5，我必须在我的main.ts中导入受支持的语言环境

import { registerLocaleData } from '@angular/common';
import localeFr from '@angular/common/locales/fr';

registerLocaleData(localeFr);

Answer 3

我也面临着同样的问题，并找到了一种解决方法。

我决定在一个资源文件夹中发布angular语言环境数据(来自cldr)。Cldr数据来自node_mopdules\@angular\common\locales (您可以在typescript中导入)。在启动之前，我使用APP_INITIALIZER从给定特定locale_id的资产加载当前文化数据。

诀窍是避免使用import关键字，因为EC2015不支持动态导入。为了从js文件中获取区域性数据，我编写了这段“脏”代码：

import { Injectable, Inject, LOCALE_ID } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class LoaderService {

  constructor(protected httpClient: HttpClient,
              @Inject(LOCALE_ID) protected locale: string) { }

private async loadAngularCulture(locale) {
      let angularLocaleText = await this.httpClient.get(`assets/angular-locales/${locale}.js`).toPromise();

      // extracting the part of the js code before the data, 
      // and i didn't need the plural so i just replace plural by null.
      const startPos = angularLocaleText.indexOf('export default ');
      angularLocaleText = 'return ' + angularLocaleText.substring(startPos + 15).replace('plural', null);

      // The trick is here : to read cldr data, i use a function
      const f = new Function(angularLocaleText);
      const angularLocale = f();

      // console.log(angularLocale);

      // And now, just registrer the object you just created with the function
      registerLocaleData(angularLocale);
  }

并且是我的mainModule，使用APP_INITIALIZER：

export function configFactory(intlLoader: SfkIntlLoaderService) {
  return intlLoader.initializer();
}

export function localFunction() {
  // the rule to get you language according. 
  // Here, for demo, i just read it from localstorage
  return localStorage.getItem('LANGUGAGE');
}

@NgModule({
 declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  )
  ],
  providers: [
    LoaderService,
    {
      provide: LOCALE_ID,
      deps: [],
      useFactory: localFunction
    },
    {
      provide: APP_INITIALIZER,
      useFactory: configFactory,
      deps: [LoaderService],
      multi: true
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

希望这能有所帮助！