前言

一個小網站，客群可能很單一，在台灣也許只要網站只要有中文就好了。可是隨著服務擴大，客群也跟著變大，可能產品進軍亞洲，甚至拓展到全球，這時候至少會提供英文介面，甚至日文、韓文都有能。當我們點進大公司的網站時，也都可以看到他們提供好幾種語言，可見多語言的介面非常重要。

目標

模板可以這樣使用

<!-- 當我們翻譯成西班牙語，應該變成 'hola mundo'  -->
<p>{{ 'hello world' | translate }}</p>

模組的部分大概會長這樣

this.translate.use('es'); // 用西班牙文

關於翻譯技術層面的新知識並沒有太多，主要是將一些基礎概念作應用，因此接下來比較不會有太多文字解釋，主要還是以程式碼來展現如何實現我們的目標。

Plunker

藍圖

|- app/
    |- app.component.html
    |- app.component.ts
    |- app.module.ts
    |- main.ts
    |- translate/
        |- index.ts
        |- lang-en.ts
        |- lang-es.ts
        |- lang-zh.ts
        |- translate.pipe.ts
        |- translate.service.ts
        |- translation.ts
|- index.html
|- systemjs.config.js
|- tsconfig.json

動工

首先要連結我們的字典檔

// app/translate/translation.ts

import { OpaqueToken } from '@angular/core';

// 引進我們的語言檔案包
import { LANG_EN_NAME, LANG_EN_TRANS } from './lang-en';
import { LANG_ES_NAME, LANG_ES_TRANS } from './lang-es';
import { LANG_ZH_NAME, LANG_ZH_TRANS } from './lang-zh';

// translation token
export const TRANSLATIONS = new OpaqueToken('translations');

// 翻譯辭典
const dictionary = {
    [LANG_EN_NAME]: LANG_EN_TRANS,
    [LANG_ES_NAME]: LANG_ES_TRANS,
    [LANG_ZH_NAME]: LANG_ZH_TRANS,
};

// providers
export const TRANSLATION_PROVIDERS = [
    { provide: TRANSLATIONS, useValue: dictionary },
];

TRANSLATION_PROVIDERS 會註冊在一開始的 bootstrap。

Translate Service

接著要建立服務，用來做切換語言用

// app/translate/translate.service.ts

import {Injectable, Inject} from '@angular/core';
import { TRANSLATIONS } from './translations'; // import our opaque token

@Injectable()
export class TranslateService {
    private _currentLang: string;

    public get currentLang() {
        return this._currentLang;
    }

    // inject our translations
    constructor(@Inject(TRANSLATIONS) private _translations: any) {
    }

    public use(lang: string): void {
        // set current language
        this._currentLang = lang;
    }

    private translate(key: string): string {
        // private perform translation
        let translation = key;

        if (this._translations[this.currentLang] && this._translations[this.currentLang][key]) {
            return this._translations[this.currentLang][key];
        }

        return translation;
    }

    public instant(key: string) {
        // call translation
        return this.translate(key); 
    }
}

Translation Pipe

之前介紹過 Pipe，目的是讓我們在模板中的文字，能透過 Pipe 來做切換。

// app/translate/translate.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';
import { TranslateService } from '../translate'; // translate service

@Pipe({
    name: 'translate',
    pure: false // 使成為 impure
})

export class TranslatePipe implements PipeTransform {

    constructor(private _translate: TranslateService) { }

    transform(value: string, args: any[]): any {
        if (!value) return;
        return this._translate.instant(value);
    }
}

@Pipe 裡面的 pure 要選 false。這樣才會變成 impure pipe。 Angular 在每次偵測變化的週期都會執行 impure pipe。如果是 pure pipe，只有在 Input 有變化才會執行。 所以這邊我們要加上這句，才能順利讓程式翻譯。

字典檔

簡單來說就是放一堆語詞的模組。

// lang-zh.ts

export const LANG_ZH_NAME = 'zh';

export const LANG_ZH_TRANS = {
    'hello world': '你好，世界',
};

App Module

基礎設置，將用到的東西引入，並將 TranslatePipe 注入。

// app.module.ts

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

import { AppComponent }   from './app.component';
import { TRANSLATION_PROVIDERS, TranslatePipe, TranslateService }   from './translate';

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent, TranslatePipe ], // Inject Translate Pipe here
  bootstrap:    [ AppComponent ],
  providers:    [ TRANSLATION_PROVIDERS, TranslateService ]
})

export class AppModule { }

App Component

// app/app.component.ts

import { Component, OnInit } from '@angular/core';
import { TranslateService } from './translate';

@Component({
    moduleId: module.id,
    selector: 'app-root',
    templateUrl: 'app.component.html',
})

export class AppComponent implements OnInit {

    public translatedText: string;
    public supportedLanguages: any[];

    constructor(private _translate: TranslateService) { }

    ngOnInit() {
        // standing data
        this.supportedLangs = [
        { display: 'English', value: 'en' },
        { display: 'Español', value: 'es' },
        { display: '中文', value: 'zh' },
        ];

        // 設定目前語言
        this.selectLang('zh');
    }

    isCurrentLang(lang: string) {
        //確定選的語言是否為顯示語言
        return lang === this._translate.currentLang;
    }

    selectLang(lang: string) {
        // 設定目前語言
        this._translate.use(lang);
        this.refreshText();
    }

    refreshText() {
        // 語言改變就刷新
        this.translatedText = this._translate.instant('hello world');
    }
}

App Template

這邊我們用兩種方式翻譯，一個是使用 Pipe，一個使用服務。

<!--app/app.component.html-->

<div class="container">
  <h4>Translate: Hello World</h4>
  <div class="btn-group">
    <button *ngFor="let lang of supportedLangs"
      (click)="selectLang(lang.value)"
      class="btn btn-default" [class.btn-primary]="isCurrentLang(lang.value)">
      {{ lang.display }}
    </button>
  </div>
  <div style="margin-top: 20px">
    <p>
      使用 Pipe 翻譯: <strong>{{ 'hello world' | translate }}</strong>
    </p>
    <p>
      使用 Service 翻譯: <strong>{{ translatedText }}</strong>
    </p>
  </div>
</div>