阅读 121

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
复制代码

一、安装

在安装之前需要确认自己使用的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
复制代码

二、使用前端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注入进来,而他的实现是由useFactorycreateTranslateLoader来具体实现。

3. 配置json翻译模板

在2中可以看到new TranslateHttpLoader(http, './assets/i18n/', '.json')时已经指定了翻译模板的存放路径,所以现在需要在assets默认静态文件的存放目录下新建名为i18n的文件夹,并在其下新建zh.jsonen.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>
复制代码

三、从后台请求需要的翻译模板

如果不想在前台配置翻译模板的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;
    }
}
复制代码

四、最终结果

1. 英文:

en

2. 中文

zh

3. 完整代码

完整代码请查看github

五、参考文献

[1] ngx-translate官方Github

关注下面的标签,发现更多相似文章
评论