Angular 5 多語言國際化小結
阿新 • • 發佈:2018-12-27
專案多語言國際化:
ngx-translate1.安裝npm install --save @ngx-translate/corenpm install --save @ngx-translate/http-loader需要注意的是,如果是Angular 5.x的版本,需要指定 ng-translate版本為9.x。當前最新版是10.x,適用Angular v6,如果是Angular v5,會報錯 import {TranslateHttpLoader} from '@ngx-translate/http-loader';import {HttpClient, HttpClientModule} from '@angular/common/http';...imports:[...TranslateModule.forRoot({ loader: { provide: TranslateLoader, useFactory: HttpLoaderFactory, deps: [HttpClient] } })]...export function HttpLoaderFactory(http: HttpClient) { return new TranslateHttpLoader(http);}3.建立i18n資料夾根據不同語言建立多語言檔案4.使用import {TranslateService} from '@ngx-translate/core';constructor中可以定義預設語言檔案: constructor(private translate: TranslateService) { translate.setDefaultLang('en'); // 獲取當前瀏覽器環境的語言比如en、 zh const broswerLang = translate.getBrowserLang(); translate.use(broswerLang.match(/en|zh-CN/) ? broswerLang : 'zh-CN'); }view中使用:通過translate 管道即可{{ 'thTLabel' | translate }}還有更多使用方式,可以檢視官網:
ngx-translate1.安裝npm install --save @ngx-translate/corenpm install --save @ngx-translate/http-loader需要注意的是,如果是Angular 5.x的版本,需要指定 ng-translate版本為9.x。當前最新版是10.x,適用Angular v6,如果是Angular v5,會報錯
具體版本檢視:https://github.com/ngx-translate/core/releases
npm install --save @ngx-translate/core@9.1.1