利用ngx-angular實現angular2的國際化
阿新 • • 發佈:2019-01-11
使用angular-cli初始化專案: ng new my-project
使用npm安裝ngx-translate模組 npm install --save @ngx-translate/core
npm install --save @ngx-translate/http-loader
在專案的根模組app.module.ts中引入該模組
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader' ;
export function HttpLoaderFactory(http:Http){
return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}
@NgModule({
declarations: [
AppComponent
],
imports: [
...
TranslateModule.forRoot({
loader:{
provide:TranslateLoader,
useFactory:HttpLoaderFactory,
deps:[Http]
}
}
)
],
providers: [],
bootstrap: [AppComponent]
})
在assets資料夾下新建i18n資料夾,並且新建兩個語言的json檔案。(比如zh-CN.json和en.json)
json檔案是key-value形式的,key值代表要翻譯的字串,value值為特定語言的翻譯結果,不用語言的檔案一般key值是相同的,只是value值不同。