angular多語言配置

angular的國際化方案，採用ngx-translate來實現。

安裝模塊：

npm install @ngx-translate/core --save

在根模塊中導入：

// other module
import {TranslateModule} from '@ngx-translate/core';
@NgModule({
    declarations: [
        AppComponent,
    ],
    imports: [
        // other module
        TranslateModule.forRoot(),

    ],
    providers: [
    ],
    bootstrap: [AppComponent]
})
export class AppModule {
}

咱們但願能夠在一個固定的文件裏面配置對應的翻譯文件，而後在每一個用到的組件裏面使用它，隨意咱們須要藉助TranslateHttpLoader來加載翻譯文件。首先安裝TranslateHttpLoader:

npm install @ngx-translate/http-loader --save

翻譯文件能夠放在/assets/i18n/[lang].json中，[lang]表明使用的語言文件名稱。而後咱們能夠在跟組件中添加配置對應的加載項：

// other module
import {TranslateModule} from '@ngx-translate/core';
// 自定義加載方法
export function HttpLoaderFactory(http: HttpClient) {
    return new TranslateHttpLoader(http, './assets/i18n/', '.json?');
}
@NgModule({
    declarations: [
        AppComponent,
    ],
    imports: [
        // other module
        TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: HttpLoaderFactory,
                deps: [HttpClient],
            }
        }),
    ],
    providers: [
    ],
    bootstrap: [AppComponent]
})
export class AppModule {
}

而後咱們在翻譯文件中配置一個簡單的示例：

// /asserts/il8n/en.json
{
  "Hello": "hello, {{value}}",
  "Introduce": {
    "Name": "my name is {{name}}.",
    "Today": "today is {{date}}, and now time is {{time}}"
  }
}

應用的時候咱們可使用點語法，例如：Introduce.Name。

好了，定義好以後再來看如何使用。咱們可使用服務或管道或指令的方式來達到顯示語言的效果。在使用以前，咱們須要在應用中初始化TranslateService：

import { Component } from '@angular/core';
import {TranslateService} from '@ngx-translate/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.less']
})
export class AppComponent {
  constructor(
      public translate: TranslateService,
  ) {
      this.translate.setDefaultLang('en');
      this.translate.use('en');
  }
}

我傾向於在跟組件的construct裏面初始化TranslateService，由於一個系統的翻譯是統一的，在開始應用的時候就須要設置好默認語言。這裏使用translate.setDefaultLang('en')來設置默認語言爲英文。而後使用translate.user('en')手動選擇使用英文。在切換語言的時候，咱們使用translate.user([lang])來設置啓用哪一個語言。

最後來使用翻譯，有多種使用的方式。來看看。

使用方式

使用Service的方式

在運行的時候，會先發起個請求經過Http獲取翻譯文件，經過Observable的方式應用參數上去，而後得到翻譯的內容。

// app.compent.ts
this.translate.get(
    'Introduce.Name',
    {name: 'Jarvis'}
).subscribe((res: string) => {
    console.log('res', res); // res my name is Jarvis.
});
this.translate.get(
    'Introduce.Today',
    {
        date: new Date().getDate(),
        time: new Date().getTime()
    },
).subscribe((res: string) => {
    console.log('res', res); // res today is 22, and now time is 1534937370461
});

使用pipe的方式

<div>{{'Hello' | translate: param</div>

在js裏定義參數param:

const param = {
    value: 'world',
};

使用指令

管道的方式雖然方便，但參數仍是須要在先定義好，這樣子變量多的話也比較繁瑣。使用指令的方式能夠在程序中直接傳參：

<span [translate]="'Introduce.Name'" [translateParams]="{name: 'Jarvis'}"></span>

或者直接將元素的內容做爲key：

<span translate [translateParams]="{date: '10.11', time: '20:33'}">Introduce.Today</span>

應用html標籤

能夠在翻譯文件中中定義簡單的行級html標籤

{
  "Hello": "hello, {{value}}",
}

要渲染它們，在任何元素上只須要將innerHTML屬性和管道一同使用便可。

<p [innerHTML]="'Introduce.Name'| translate: param"></p>

經常使用方法

instant() 即時翻譯

有些狀況下，咱們要在js裏面動態的獲取值和賦值，這時候無法使用模板語法，使用subscribe的方式又不利於代碼的組織，這時候咱們須要即時翻譯來搞定了。方法定義：

instant(key: string|Array<string>), insterpolateParams?: Object):string|Object

調用的時候傳入key和對應的參數，便可返回當前key的翻譯：

this.translate.instant('HELLO', {value: 'Jarvis'});

可是須要注意的是，這個方法是同步的，默認加載器是異步的。使用這個方法須要確保翻譯文件已經加載完成了，若是不肯定，就應該用get的方式。
參考：

• https://www.npmjs.com/package/@ngx-translate/core