[Angular] 簡單製作多國語系

我想要用一種簡單而且直覺的方式製作多國語系，想像的用法如下:

user-list.component.html

原始碼

1. <h2>{{lang['T_編輯使用者']}}</h2> 
2.  
3. <div> 
4.    <p *ngIf="lang.id == 'en'"> 
5.    Complicated English description... 
6.    </p> 
7.    <p *ngIf="lang.id == 'tw'"> 
8.    複雜的中文描述... 
9.    </p> 
10. </div> 
11.  
12. <button type="submit">{{lang['B_儲存']}}</button> 
13.  
14. <select [(ngModel)]="lang.id" (change)="lang.change()"> 
15.    <option *ngFor="let x of lang.options | keyvalue" [value]="x.key">{{x.value}}</option> 
16. </select> 

<h2>{{lang['T_編輯使用者']}}</h2>

<div>
    <p *ngIf="lang.id == 'en'">
    Complicated English description...
    </p>
    <p *ngIf="lang.id == 'tw'">
    複雜的中文描述...
    </p>
</div>

<button type="submit">{{lang['B_儲存']}}</button>

<select [(ngModel)]="lang.id" (change)="lang.change()">
    <option *ngFor="let x of lang.options | keyvalue" [value]="x.key">{{x.value}}</option>
</select>

我希望能使用中文變數，有熟悉的文字可以讓程式看起來親切一點，對於複雜的文字區段也保留彈性，簡單的切換方式，以及狀態保留，讓 browser 紀錄選擇的語系。

user-list.component.ts

原始碼

1. import { Component, OnInit } from '@angular/core'; 
2. import { AppLang } from 'app/app.lang'; 
3.  
4. @Component({ 
5.    selector: 'app-user-list', 
6.    templateUrl: './user-list.component.html' 
7. }) 
8. export class UserListComponent implements OnInit { 
9.  
10.    /** 狀態選項 */ 
11.    statusItems = { 
12.        'y': this.lang.E_啟用, 
13.        'n': this.lang.E_停用, 
14.    }; 
15.  
16.    constructor( 
17.        public lang: AppLang 
18.    ) { } 
19.  
20.    ngOnInit() { 
21.        let msg = String(this.lang.M_請填寫_0_的刻度值).format(3); 
22.    } 
23. } 

import { Component, OnInit } from '@angular/core';
import { AppLang } from 'app/app.lang';

@Component({
    selector: 'app-user-list',
    templateUrl: './user-list.component.html'
})
export class UserListComponent implements OnInit {

    /** 狀態選項 */
    statusItems = {
        'y': this.lang.E_啟用,
        'n': this.lang.E_停用,
    };

    constructor(
        public lang: AppLang
    ) { }

    ngOnInit() {
        let msg = String(this.lang.M_請填寫_0_的刻度值).format(3);
    }
}

已經想好使用情境了，接著來就是完成實作了!

app.lang.ts

原始碼

1. import { Injectable } from '@angular/core'; 
2.  
3. /** 多國語言 */ 
4. @Injectable() 
5. export class AppLang { 
6.  
7.    constructor() { 
8.        let _: any = {}; /* 語系字典 */ 
9.        let self: any = this; 
10.        let names: string[] = Object.keys(this).filter(n => !'id,options,change'.includes(n)); 
11.  
12.        /* 重組語系字典 */ 
13.        Object.keys(this.options).forEach(id => { 
14.            _[id] = {}; 
15.            names.forEach(name => _[id][name] = self[name][id]); 
16.        }); 
17.  
18.        /* 複寫 change */ 
19.        this.change = function () { 
20.            if (!_[this.id]) { this.id = 'tw'; } 
21.  
22.            Object.assign(this, _[this.id]); 
23.            localStorage['langId'] = this.id; 
24.        } 
25.  
26.        this.change (); 
27.    } 
28.  
29.  
30.    id: string = localStorage['langId']; 
31.  
32.    options: any = { 
33.        tw: '中文', 
34.        en: 'English', 
35.    }; 
36.  
37.    /** 變更語言 */ 
38.    change() { } 
39.  
40.  
41.  
42.    /*=[ Title ]=============================================*/ 
43.  
44.    T_編輯使用者: any = { 
45.        tw: '編輯使用者', 
46.        en: 'Edit User', 
47.    }; 
48.    //... 
49.  
50.    /*=[ Field ]=============================================*/ 
51.  
52.    F_名稱: any = { 
53.        tw: '名稱', 
54.        en: 'Name', 
55.    }; 
56.    //... 
57.  
58.    /*=[ Button ]=============================================*/ 
59.  
60.    B_儲存: any = { 
61.        tw: '儲存', 
62.        en: 'Save', 
63.    }; 
64.    //... 
65.  
66.  
67.    /*=[ Enum ]=============================================*/ 
68.  
69.    E_啟用: any = { 
70.        tw: '啟用', 
71.        en: 'Enable', 
72.    }; 
73.    E_停用: any = { 
74.        tw: '停用', 
75.        en: 'Disable', 
76.    }; 
77.    //... 
78.  
79.  
80.    /*=[ Message ]=============================================*/ 
81.  
82.    M_請填寫_0_的刻度值: any = { 
83.        tw: '請填寫 {0} 的刻度值', 
84.        en: 'Please fill in the scale value of {0}.', 
85.    }; 
86.    //... 
87.  
88. } 

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

/** 多國語言 */
@Injectable()
export class AppLang {

    constructor() {
        let _: any = {}; /* 語系字典 */
        let self: any = this;
        let names: string[] = Object.keys(this).filter(n => !'id,options,change'.includes(n));

        /* 重組語系字典 */
        Object.keys(this.options).forEach(id => {
            _[id] = {};
            names.forEach(name => _[id][name] = self[name][id]);
        });

        /* 複寫 change */
        this.change = function () {
            if (!_[this.id]) { this.id = 'tw'; }

            Object.assign(this, _[this.id]);
            localStorage['langId'] = this.id;
        }

        this.change ();
    }


    id: string = localStorage['langId'];

    options: any = {
        tw: '中文',
        en: 'English',
    };

    /** 變更語言 */
    change() { }



    /*=[ Title ]=============================================*/

    T_編輯使用者: any = {
        tw: '編輯使用者',
        en: 'Edit User',
    };
    //...

    /*=[ Field ]=============================================*/

    F_名稱: any = {
        tw: '名稱',
        en: 'Name',
    };
    //...

    /*=[ Button ]=============================================*/

    B_儲存: any = {
        tw: '儲存',
        en: 'Save',
    };
    //...


    /*=[ Enum ]=============================================*/

    E_啟用: any = {
        tw: '啟用',
        en: 'Enable',
    };
    E_停用: any = {
        tw: '停用',
        en: 'Disable',
    };
    //...


    /*=[ Message ]=============================================*/

    M_請填寫_0_的刻度值: any = {
        tw: '請填寫 {0} 的刻度值',
        en: 'Please fill in the scale value of {0}.',
    };
    //...

}

app.module.ts 配置

原始碼

1. //... 
2. import { AppLang } from 'app/app.lang'; 
3.  
4. @NgModule({ 
5.    declarations: [ 
6.        //... 
7.    ], 
8.    imports: [ 
9.        //... 
10.    ], 
11.    providers: [ 
12.        //... 
13.        AppLang 
14.    ], 
15.    bootstrap: [AppComponent] 
16. }) 
17. export class AppModule { } 

//...
import { AppLang } from 'app/app.lang';

@NgModule({
    declarations: [
        //...
    ],
    imports: [
        //...
    ],
    providers: [
        //...
        AppLang
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }