Angular 5 多语言国际化小结

项目多语言国际化：

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 }}

还有更多使用方式，可以查看官网：

https://github.com/ngx-translate/core