Neutrino's Blog

前言

前一篇已經說過為甚麼多語言的網站很重要，也示範了如何達到多語言的效果。但是，我們對於語言翻譯的需求還有很多，例如我如果想要讓一串句子每次搭配不同的變數怎麼辦，像是「你好，Tiger Liu」或是「你好，Tiger」這樣的可變性。或是如果有些語詞在某些語言中翻譯不出來、不想翻譯或是不小心忘記增加字典時，例如「掰掰囉！」在英文翻成「Bye Bye!」可是在日文的字典檔忘記加上這個字，要讓網站還是能夠顯示「Bye Bye!」怎麼做？

目標

• 讓我們的翻譯可以有占位符號 ( placeholder)，如此以來可以讓句子的可變性變大，如前言所述一般。
• 當在語言包找不到符合的字句的時候，自動用備用的語言當替補。

我們將繼續用上一篇的程式來修改
完成的 Plunker

開工

語言包

先來看看我們的語言包最後長怎樣

// lang-en.ts
export const LANG_EN_NAME = 'en';
export const LANG_EN_TRANS = {

'hello world': 'hello world',

'hello greet': 'Hello, %0 %1!', // two placeholder

'well done': 'Well done %0', // one placeholder

'good bye': 'bye bye', // 只有在英文中定義

}
// lang-zh.ts
export const LANG_ZH_NAME = 'zh';
export const LANG_ZH_TRANS = {

'hello world': '你好，世界',

'hello greet': '你好, %0 %1!',

'well done': '幹得好, %0',

};

更新 translate 服務

// app/translate/translate.service.ts
...
public instant(key: string, words?: string | string[]) { // 增加可能的變數

const translation: string = this.translate(key);
if (!words) return translation;
return this.replace(translation, words); // 呼叫 replace 

}
…

接著來定義replace

// app/translate/translate.service.ts
...
private PLACEHOLDER = '%'; // 我們的佔位符
public replace(word: string = '', words: string | string[] = '') {

let translation: string = word;
const values: string[] = [].concat(words);// 導入輸入的參數字串
values.forEach((e, i) => {
    //會用 e 替換掉 %i: %0, %1, ...
    translation = translation.replace(this.PLACEHOLDER.concat(<any>i), e);
});

return translation;

}
…

更新 Pipe

// app/translate/translate.pipe.ts
...
transform(value: string, args: string | string[]): any { // args 可以是單一字串或是字串列

if (!value) return;

return this._translate.instant(value, args); // 加入 args

}

…

更新模板

<!--app/app.component.html-->
<!-- 多值通道 –>

<p>

Translate <strong class="text-muted">Hello, %0 %1!</strong>:

<br>

<strong>{{ 'hello greet' | translate:['Jane', 'Doe'] }}</strong>

</p>
<!-- 單一值通道 –>

<p>

Translate <strong class="text-muted">Well done %0</strong>:

<br>

<strong>{{ 'well done' | translate:'John' }}</strong>

</p>

建立事件

// app/translate/translate.service.ts
...
import { Injectable, Inject, EventEmitter } from '@angular/core'; // 引入 event emitter
…
// 增加事件

public onLangChanged: EventEmitter<string> = new EventEmitter<string>();

…
// 選取用甚麼語言

public use(lang: string): void {

…

this.onLangChanged.emit(lang); // 發布變化

}
…

主程式

先移除 selectLang() 中的 refreshText()，我們要重新架構。

// app/app.component.ts
...
ngOnInit() {

// 載入一些東西

…
this.subscribeToLangChanged(); // subscribe to language changes

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

}
selectLang(lang: string) {

// 設為預設

this._translate.use(lang);

// this.refreshText(); // 刪掉這行

}
subscribeToLangChanged() {

// 刷新文字

return this._translate.onLangChanged.subscribe(x => this.refreshText());

}
…

這樣設定之後，只要語言改變，就會自動更新

預設 & 備用語言

備用語言的概念是，假設預設是英文，當日文沒有字串時，就回去用預設的英文字串。

// app/translate/translate.service.ts
...
// 增加 3 個 properties

private _defaultLang: string;

private _currentLang: string;

private _fallback: boolean;
public get currentLang() {

return this._currentLang || this._defaultLang; // 當沒有當前選取語言時用預設語言

}
public setDefaultLang(lang: string) {

this._defaultLang = lang; // 設定預設

}
public enableFallback(enable: boolean) {

this._fallback = enable; // 是否啟用備用

}
private translate(key: string): string { // 翻譯傳入的字串

let translation = key;
// 發現目前選的語言有這個字串
if (this._translations[this.currentLang] && this._translations[this.currentLang][key]) {
    return this._translations[this.currentLang][key];
}

// 不用備用
if (!this._fallback) { 
    return translation;
}

// 發現預設語言有這字串
if (this._translations[this._defaultLang] && this._translations[this._defaultLang][key]) {
    return this._translations[this._defaultLang][key];
}

// 都沒有
return translation;

}

…

當然我們也可以

// app/app.component.ts
...
ngOnInit() {

// 可以做一些事情…

…
this.subscribeToLangChanged();

// 設定預設語言
this._translate.setDefaultLang('en'); // set English as default
this._translate.enableFallback(true); // enable fallback

// 設定目前要用的語言
this.selectLang('zh');

}
…

現在可以來測試語言包沒有字串時，是否會回去找預設的語言字串

<p>
    Translate <strong class="text-muted">Good bye (fallback)</strong>: 
    <br>
    <strong>{{ 'good bye' | translate }}</strong>
</p>

上面這一段，不管換西班牙語或是中文，都會回去找英文的字串來用