参照 ：https://www.cnblogs.com/shcrk/p/9215923.html
angular2国際ステップ
図1は、NGXのでジャーに取り付けられました
npm install @ngx-translate/core --save
npm install @ngx-translate/http-loader --save
app.moduleのモジュールパッケージに導入された2、ノート
「@角度/プラットフォームブラウザ」からインポート{BrowserModule}。
「角度/コア@」からインポート{NgModule}。
「角度/フォーム@」からインポート{FormsModule}。
"./app-routing.module" からインポート{AppRoutingModule}。
"./app.component" からインポート{AppComponent}。
"./work/work.component" からインポート{WorkComponent}。
"./news/news.component" からインポート{}のNewsComponent。
//ロード言語パックプロセスは、httpリクエストを使用します
"@角度/共通/ HTTP" からインポート{HttpClientを、HttpClientModule}。
//言語パックファイルの国際化をロードするためのローダに依存
"@ NGX-変換/ HTTP-ローダー" からのインポート{TranslateHttpLoader};
//国際モジュール用
"@ NGX-変換/コア" からインポート{TranslateModule、TranslateLoader}。
//メソッドi18nのファイルを読みます
エクスポート機能createTranslateLoader（のhttp：HttpClientを）{
新しいTranslateHttpLoader（HTTP、 "./assets/i18n/"、 ".json"）を返します。
}
@NgModule（{
宣言：[AppComponent、WorkComponent、のNewsComponent]、
輸入：[
BrowserModule、
AppRoutingModule、
FormsModule、
//必要なモジュールの国際化--start
TranslateModule、
HttpClientModule、
TranslateModule.forRoot（{
ローダー：{
提供：TranslateLoaderを、
useFactory：createTranslateLoader、
DEPS：[HttpClientを]
}
}）
// - 終わり
]、
プロバイダ：[]、
ブートストラップ：[AppComponent]
}）
エクスポートクラスAppModule {}
資産に新しい言語ライブラリi18nの新しい言語パックを装備した3、
en.json
{ "language000":"Englist",
"language001":"hello world",
"language002":"sex",
"language003":"male",
"language004":"female",
"language005":"username",
"language006":"submit"
}
zh_CN.json
{ "language000":"Englist",
"language001":"hello world",
"language002":"sex",
"language003":"male",
"language004":"female",
"language005":"username",
"language006":"submit"
}
4、在需要用到的component里面注入TranslateService
import { Component, OnInit } from "@angular/core";
//导入TranslateService服务
import { TranslateService } from "@ngx-translate/core";
@Component({
selector: "app-news",
templateUrl: "./news.component.html",
styleUrls: ["./news.component.css"]
})
export class NewsComponent implements OnInit {
public user:string="";
constructor(private translate: TranslateService) {
//增加所支持的语言包
this.translate.addLangs(["en", "zh-CN"]);
//设置默认语言
this.translate.setDefaultLang("zh-CN");
}
ngOnInit() {}
//通过select选择框来改变语言
changeLanguage(lang: string) {
this.translate.use(lang);
}
}
5.html模板
{{"language000"|translate}}:<select #languageSelect (change)="changeLanguage(languageSelect.value)">
<option *ngFor="let language of translate.getLangs()" [value]="language">{{language}}</option>
</select><br>
{{'language005'|translate}}：<textarea [(ngModel)]="user" cols=30 rows=4></textarea>
{{language}}