angular8.x + ngx-translate实现国际化

本文将介绍ngx-translate在angular8.x中的使用，主要内容有ngx-translate的安装、前端json翻译模板的配置以及如何改造为请求后台获取翻译模板json。完成后总体应用文件目录结构以下：

|- src
|- |- app
|- |- |- app.component.css
|- |- |- app.component.html
|- |- |- app.component.ts
|- |- |- app.module.ts
|- |- assetss
|- |- |- i18n
|- |- |- |- en.json
|- |- |- |- zh.json
|- |- index.html
|- |- mian.ts
|- |- polyfills.ts
|- |- style.css
|- angular.json
|- package.json
复制代码

1、安装

在安装以前须要确认本身使用的angular的版本，不一样的版本的angular可能对应不一样的ngx-translate的版本。本文使用的angular版本为8.0.0。安装版本说明以下：

Angular	@ngx-translate/core	@ngx-translate/http-loader
7/8	11.x+	4.x+
6	10.x	3.x
5	8.x to 9.x	1.x to 2.x
4.3	7.x or less	1.x to 2.x
2 to 4.2.x	7.x or less	0.x

此表格来源于ngx-translate官网，时间2019-12-1 11:16:28。

确认版本以后能够输入以下命令安装：

npm install @ngx-translate/core --save
npm install @ngx-translate/http-loader --save
复制代码

如须要指定特定的版本能够参考以下命令：

npm install @ngx-translate/core@11.x --save
复制代码

2、使用前端json翻译模板

1. 导入TranslateModule

要想在angular中使用ngx-translate，则必须将其在应用程序的根@NgModule中使用TranslateModule.forRoot()导入，forRoot静态方法是同时提供和配置服务的约定。确保只在应用程序的根模块中调用此方法，大多数状况下调用AppModule。若是须要在其余的module中使用，则须要在其余的module中使用imports: [..., TranslateModule],和exports:[..., TranslateModule]。

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {TranslateModule} from '@ngx-translate/core';

@NgModule({
    imports: [
        BrowserModule,
        TranslateModule.forRoot()
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }
复制代码

2. 使用AoT

若是想要在使用AoT编译的同时配置自定义的translateLoader，那么这边的函数必须使用export修饰，即必须使用导出函数而不是内联函数。如今AppModule中代码须要改造为以下：

// 包的导入省略......
// AoT
export function createTranslateLoader(http: HttpClient) {
    return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}
@NgModule({
  // import中必须导入HttpClientModule，不然会报错'NullInjectorError: No provider for HttpClient!'
  imports:[ BrowserModule, FormsModule, HttpClientModule,
  TranslateModule.forRoot({
      loader: {
          provide: TranslateLoader,
          useFactory: (createTranslateLoader),
          deps: [HttpClient]
      }
  })],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }
复制代码

这边的loader中的provide表明将TranslateLoader注入进来，而他的实现是由useFactory的createTranslateLoader来具体实现。

3. 配置json翻译模板

在2中能够看到new TranslateHttpLoader(http, './assets/i18n/', '.json')时已经指定了翻译模板的存放路径，因此如今须要在assets默认静态文件的存放目录下新建名为i18n的文件夹，并在其下新建zh.json和en.json翻译模板文件，以下：

// en.json
// 注意：json文件中不要写注释！！！不然会报错
{
  "i18ntest":"Test Project For i18n",
  "hello": "Hello World !",
  "author":"author: {{value}}",
  "language":"language",
  "header": {
    "author": "Default.W"
  }
}
复制代码

// zh.jsons
{
  "hello": "你好, 世界!",
  "i18ntest":"测试项目(i18n)",
  "author":"做者： {{value}}",
  "language":"语言",
  "header": {
    "author": "Default.W"
  }
}
复制代码

4. 使用

在AppComponent中使用，须要先将TranslateService导入进来，而且在构造函数处注入：

constructor(public translateService: TranslateService) {
    this.translateService.setDefaultLang('zh'); // 设置当前的默认语言类型
    this.translateService.use('zh'); // 设置使用的语言类型
}
复制代码

如今就能够在html中使用管道进行翻译了：

<h1>{{'i18ntest' | translate}}</h1>
<p>{{'hello' | translate}}</p>
复制代码

翻译还支持传值的翻译方式，html文件中的param为AppComponent中定义的变量：

// AppComponent
public param;
ngOnInit() {
    this.param = {value: 'Default.W'};
}
复制代码

<!-- app.component.html -->
<p>{{"author" | translate:param}}</p>
复制代码

3、从后台请求须要的翻译模板

若是不想在前台配置翻译模板的json文件，咱们还能够在后端自行添加properties文件，而且不要本身写好一个后台接口来请求这个配置文件并组装成为json文件返回。在前端咱们只须要将translate.loader.ts的中的TranslateLoader实现，并在实现中请求后端写好的接口就能够切换为后台的json。

// 须要从新实现这个方法来请求后端接口
export abstract class TranslateLoader {
  abstract getTranslation(lang: string): Observable<any>;
}
复制代码

实现代码示例：

export class TranslateHttpLoader implements TranslateLoader {
    /** * Get the translate from the service */
    public getTranslation(lang: string): Observable<Object> {
      	Subject subject = new Subject<any>();
        this.http.post(url).subscribe({
            next: res => {
                subject.next(res);
            },
            error: err => {
                console.log('获取失败');
            }
        });
        return subject;
    }
}
复制代码

4、最终结果

1. 英文：

2. 中文

3. 完整代码

完整代码请查看github。

5、参考文献

[1] ngx-translate官方Github