国际化 i18n

///仅作为学习记录文档

angular5国际化支持

npm安装
npm install @ngx-translate/core --save
npm install @ngx-translate/http-loader --save
yarn安装
yarn add @ngx-translate/core@9.1.1 --save
yarn add @ngx-translate/http-loader --save

@angular/cli": "1.6.5"版本下 使用最新版本的@ngx-translate/core ,@ngx-translate/http-loader会报错.
这个是因为版本原因导致的，将@ngx-translate/core替换成npm install @ngx-translate/core@9.1.1 --save版本就不会再报错。

1. app.module.ts

// app.module.ts
//......忽略部分其他代码
import { AppComponent } from './app.component';
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
// 使用TranslateHttpLoader加载项目的本地语言json配置文件
let createTranslateLoader=(http: HttpClient)=> {
    return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}
@NgModule({
      declarations: [
    AppComponent
    ],
    imports: [
        BrowserModule,
        //........忽略部分其他代码
        TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: (createTranslateLoader),
                deps: [ HttpClient ]
            }
        }),
    ],
    bootstrap: [AppComponent],
})

2. app.component.ts

//........
import { TranslateService } from "@ngx-translate/core";
export class AppComponent {
  title = 'app';
  constructor(
    private translate: TranslateService
  ) {
    this.initTranslateConfig();
  }
  //初始化国际化服务
  private lang: string = "zh";
  initTranslateConfig() {
    // 参数类型为数组，数组元素为本地语言json配置文件名
    this.translate.addLangs(["zh", "en"]);
    // 设置默认语言
    this.translate.setDefaultLang(this.lang);
    
    // 检索指定的翻译语言
    this.translate.use(this.lang)
      .subscribe(() => {// ... do something})
    //监听语言改变
    this.translate.onLangChange
        .subscribe(() => {  });
    //获取
    this.translate.get(["loginPage.title", "loginPage.login"])
         .subscribe(res => { })
  }
}

3. 在静态目录 assets/i18n下建立语言文件json (zh.json en.json ......)
   zh.json

{
    "userPage": {
        "title": "用户",
        "userInfo": {
            "name": "用户名",
            "password": "密码"
        }，
        "login": "登录{{platform}}平台"
    }
}

en.json

{
    "userPage": {
        "title": "user",
        "userInfo": {
            "name": "user name",
            "password": "password"
        }，
        "login": "login {{ platform }} platform "
    }
}

4. 在app.component.html中使用

<div>{{ 'userPage.title' | translate }}</div>
<!-- 带参数 -->
<div>{{ 'userPage.login' | translate:{ platform : '微信' } }}</div>