Angular il8n

实现一个简单的Translate

国际化首先，创建 MyTranslateLoader

import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { TranslateLoader } from '@ngx-translate/core';

import {HttpClient} from '@angular/common/http';

export function MyTranslateLoader(http: HttpClient): TranslateLoader {
    // console.log(new TranslateHttpLoader(http, './assets/i18n/', '.json').getTranslation('en-US').subscribe( x => console.log(x)));
    return new TranslateHttpLoader(http, './assets/i18n/', '.json');// 默认读取的文件
    // en-US  英文
    // zh_CN  中文
}

在 app.modules 中import

const imports = [
  TranslateModule.forRoot({
    loader: {
      provide: TranslateLoader,
      useFactory: hcdTranslateLoader,
      deps: [HttpClient]
    }
  }),
  @NgModule({
   declarations: [
     AppComponent
   ],
   imports: [ ...imports],
   bootstrap: [AppComponent]
  }
  export class AppModule { }

i18n 文件格式

zh_CN.json

{
  "NAV": {
    "SYSTEM":{
      "LANG":"语言",
      "TOOLTIP":"系统设置"
    }
 }

en-US.json

{
  "NAV": {
    "SYSTEM":{
      "LANG":"language",
      "TOOLTIP":"system settings"
    }
 }

修改语言的方法

langChange(lang: string ): void {
    this.translate.use( lang );// 'zh_CN' /  'en-US'
}

现在就已经完成了一个简单的translate

重写TranslateLoader

class MultiTranslateLoader implements TranslateLoader {
  constructor(
    private http: HttpClient,
    private resources: Array<{ prefix: string, suffix: string }> = []
  ) {}

  public getTranslation(lang: string): any {
    return forkJoin(this.resources.map(config => {
      return this.http.get(`${config.prefix}${lang}${config.suffix}`);
    })).pipe(
      map(response => {
        return response.reduce((a, b) => {
          return Object.assign(a, b);
        });
      })
    );
  }
    
    // 自定义加载不同路径下的多个文件
    export function translateLoader(http: HttpClient) {
      return new MultiTranslateLoader(http, [
        // set up locale files
        { prefix: './assets/i18n/alert/', suffix: '.json' },
        { prefix: './assets/i18n/common/', suffix: '.json' },
      ]);
    }
    
	// 自定义  文件名
    const mockTranslations = {
      'en': {},
      'zh-cn': {}
    };
	export class MockTranslationLoader implements TranslateLoader {
      getTranslation(code: string = '') {
        return of(mockTranslations[code]);
      }
    }
}