Angular2 國際化 (i18n)

時間 2019-12-04

標籤 angular2 angular 國際化 i18n 欄目 AngularJS 简体版

原文原文鏈接

本文可供Angular5，6，7的項目參考使用html

背景

Angular: 7
Angular CLI: 7.1.2
Node: 10.4.1

實現

本文介紹了三種實現方法，由於本人使用的是第三種，因此第1、二種（分享了連接）就不贅述了。git

方法一

使用Angular cli實現，即便用Angular自帶的i18n工具。github

i18n 模板的翻譯過程分爲四個階段npm

1.在組件模板中標記須要翻譯的靜態文本信息。json

2.建立翻譯文件：使用 Angular CLI 的 xi18n >命令，把標記過的文本提取到一個符合行業標準的翻譯源文件中。bootstrap

3.編輯所生成的翻譯文件：把提取出的文本翻譯成目標語言。segmentfault

4.把翻譯完成的文件合併迴應用。要作到這一點，請使用 Angular CLI 的 build >命令來編譯此應用，選擇一個區域相關的配置，或指定下列命令選項。瀏覽器

--i18nFile=指向翻譯文件的路徑

--i18nFormat=此翻譯文件的格式

--i18nLocale=地區 ID

該命令會使用翻譯的文本替換原始信息，並生成新的目標語言版本的應用程序。bash

實現詳情可查看參考連接～app

方法二

使用第三方庫 ngx-translate 實現，配置和使用可查看參考連接（很詳細啦）。

方法三

使用第三方庫 ngstack 實現

如下例子僅供Angular 6以上的項目參考，Angular 5及如下版本可查看參考連接～

1.安裝

npm install @ngstack/translate
複製代碼

2.配置

在src/assets/i18n應用程序的文件夾中建立文件 en.json（英文版）和zh-Hans（簡體中文版）。

en.json

{
  "TITLE": "Hello!"
}
複製代碼

zh-Hans.json

{
  "TITLE": "您好!"
}

複製代碼

在主應用程序模塊中導入TranslateModule，APP_INITIALIZER，配置TranslateService，添加HttpClientModule模塊依賴。

app.module.ts

import { NgModule, APP_INITIALIZER } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { TranslateModule } from '@ngstack/translate';

// needed to load translation before application starts
export function setupTranslateService(service: TranslateService) {
  return () => service.load();
}

@NgModule({
  imports: [
    BrowserModule,
    HttpClientModule,
    //  在啓動時將瀏覽器語言做爲活動語言
    TranslateModule.forRoot()
    
    //  使用activeLang屬性自定義活動語言爲英文
    //  TranslateModule.forRoot({
    //      activeLang: 'en'
    //  });
  ],
  providers: [
    // needed to load translation before application starts
    {
      provide: APP_INITIALIZER,
      useFactory: setupTranslateService,
      deps: [TranslateService],
      multi: true
    }
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {
    constructor(translate: TranslateService) {
    translate.use('en');
    translate.use('zh-Hans')
  }
}

複製代碼

3.使用

經過管道翻譯

app.component.html

<h2>
  {{ 'TITLE' | translate }}
</h2>
複製代碼

（若未找到json文件，會直接顯示「TITLE」）

此外，還有以下幾種方法

<element>{{ 'KEY' | translate }}</element>
<element [attribute]="property | translate"></element>
<element attribute="{{ property | translate }}"></element>
<element [innerHTML]="'KEY' | translate"></element>
<element>{{ 'PROPERTY.PATH' | translate }}</element>
<element>{{ 'FORMAT' | translate:params }}</element>
複製代碼

經過服務翻譯

app.component.html

<h2>
  {{ title }}
</h2>
複製代碼

app.component.ts

import { TranslateService } from '@ngstack/translate';
...
@Component({...})
export class AppComponent {

  title: string;

  constructor(translate: TranslateService) {

    this.title = translate.get('TITLE');

  }

}
複製代碼

4.切換語言

app.component.html

<h2>
  {{ 'TITLE' | translate }}
</h2>

<button type="button" (click)="changeLanguage('zh-Hans')">
    中文
</button>

<button type="button" (click)="changeLanguage('en')">
    English
</button>
複製代碼

app.component.ts

import { TranslateService } from '@ngstack/translate';
...
@Component({...})
export class AppComponent {

  constructor(translate: TranslateService) {}

  //  切換語言
  changeLanguage(lang: string) {  
    this.translate.activeLang = lang;
  }
}
複製代碼