Angular2及以上版本的多语言问题

1、多语言的配置，正常安装@ngx-translate/core和@ngx-translate/http-loader，注意@ngx-translate/core和@ngx-translate/http-loader的版本和当前使用的Angular版本有关，可以参考下图：

 

也可参考官方文档：https://github.com/ngx-translate/core#5-use-the-service-the-pipe-or-the-directive

 

import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import {HttpClient, HttpClientModule} from '@angular/common/http';

　　

// 实现AOT编译
export function createTranslateLoader(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

　　

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
   // 此处省略其他无关模块配置
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (createTranslateLoader),
        deps: [HttpClient]
      }
    }),
  ]

　　

2、使用this.translateService.instant失效的问题

　　失效原因：是因为在组件初始化的时候，翻译文件有可能没有加载完成，这个方法要在确保翻译文件加载完成的情况下才能使用

　　解决方案：1、可以使用get方法替代

　　　　　　　2、可以在系统启动的时候通过在providers中做处理，具体代码如下

import { Injector, APP_INITIALIZER } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
import { LOCATION_INITIALIZED } from '@angular/common';

　　

export function appInitializerFactory(translate: TranslateService, injector: Injector) {
  return () => new Promise<any>((resolve: any) => {
    const locationInitialized = injector.get(LOCATION_INITIALIZED, Promise.resolve(null));
    locationInitialized.then(() => {
      const langToSet = 'zh_CN'
      translate.setDefaultLang('zh_CN');
      let lang = window.localStorage.getItem('lang') || 'zh_CN'
      if (lang && lang.indexOf('-')) {
        lang = lang.replace('-', '_')
      }
      translate.use(lang).subscribe(() => {
        // console.info(`Successfully initialized '${langToSet}' language.'`);
      }, err => {
        console.error(`Problem with '${langToSet}' language initialization.'`);
      }, () => {
        resolve(null);
      });
    });
  });
}

　　

providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: appInitializerFactory,
      deps: [TranslateService, Injector],
      multi: true
    }
  ]

　　关于instant失效的问题，参考来源：https://github.com/ngx-translate/core/issues/517