项目多语言国际化:
ngx-translate
1.安装
npm install --save @ngx-translate/core
npm 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
2.根模块中引入:
import {TranslateModule, TranslateLoader} from '@ngx-translate/core';
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.使用
在
app.component.ts中注入,
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 }}
还有更多使用方式,可以查看官网: