Angular2中使用ngx-translate进行国际化

发表于

1.使用npm安装模块

1
2
npm install --save @ngx-translate/core 
npm install --save @ngx-translate/http-loader

2.在项目的根模块app.module.ts中引入该模块

使用TranslateHttpLoader来从"/assets/i18n/[lang].json"载入语言文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import {BrowserModule} from '@angular/platform-browser';
import {HttpModule, Http} from '@angular/http';
import {TranslateModule, TranslateLoader} from '@ngx-translate/core';
import {TranslateHttpLoader} from '@ngx-translate/http-loader';
export function HttpLoaderFactory(http: Http) {
    return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}
@(! AngularJS)NgModule({
    imports: [
        BrowserModule,
        HttpModule,
        TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: HttpLoaderFactory,
                deps: [Http]
            }
        })
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

3.新建语言包文件

在assets文件夹下新建i18n文件夹，并且新建两个语言的json文件。（比如zh-CN.json和en.json）

json文件是key-value形式的，key值代表要翻译的字符串，value值为特定语言的翻译结果，不同语言的文件一般key值是相同的，只是value值不同。

1
2
3
4
5
6
7
8
9
10
11
12
13
//zh-CN.json
{
    "welcome":"欢迎使用本应用",
    "hello":"你好",
    "get-lang":"获取语言类型"
}
//en.json
{
    "welcome":"welcome to this app",
    "hello":"Hola",
    "get-lang":"get the language type"
}

4.在相应的组件中使用translate服务

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import { TranslateService } from '@ngx-translate/core'
@Component({
  ...
})
export class AppComponent {
  constructor(private translate: TranslateService) {
    //添加语言支持
    translate.addLangs(['zh-CN', 'en']);
    //设置默认语言，一般在无法匹配的时候使用
    translate.setDefaultLang('zh-CN');
    //获取当前浏览器环境的语言比如en、 zh
    let broswerLang = translate.getBrowserLang();
	//切换语言
    translate.use(broswerLang.match(/en|zh-CN/) ? broswerLang : 'zh-CN');
  }
  changeLang(lang) {
    console.log(lang);
    this.translate.use(lang);
  }
  
  toggleLang() {
    console.log(this.translate.getBrowserLang());
    //获取语言风格，相当于更详细的语言类型，比如zh-CN、zh-TW、en-US
    console.log(this.translate.getBrowserCultureLang());
  }

在模板中使用translate管道

示例模板：

1
2
3
4
5
6
7
8
9
10
<div>
  <h2>{{ title | translate }}</h2>
  <label>
    {{ 'hello' | translate }}
    <select #langSelect (change)="changeLang(langSelect.value)">
      <option *ngFor="let lang of translate.getLangs()" [value]="lang" [selected]="lang === translate.currentLang">{{ lang }}</option>
    </select>
  </label>
</div>
<button (click)="toggleLang()">{{'get-lang' | translate}}</button>

5.具体使用

有三种方式来在模板中使用：通过service，通过pipe以及通过directive。

例：en.json如下

1
2
3
{
    "HELLO": "hello {{value}}"
}

  • 通过service：
1
2
3
4
translate.get('HELLO', {value: 'world'}).subscribe((res: string) => {
    console.log(res);
    //=> 'hello world'
});
  • 通过管道
1
<div>{{ 'HELLO' | translate:param }}</div>

在component中：

1
param = {value: 'world'};

  • 通过指令
1
<div [translate]="'HELLO'" [translateParams]="{value: 'world'}"></div>

或者直接写成这样：

1
<div translate [translateParams]="{value: 'world'}">HELLO</div>