angular2中開發國際化(一個頁面中來回切換幾種語言)

實現國際化基本步驟

• 1、使用angular-cli建立一個專案工程
• 2、建立一個元件page3的demo來展現國際化功能
• 3、使用npm安裝ngx-translate模組
  
  • npm install --save @ngx-translate/core
  • npm install --save @ngx-translate/http-loader

• 4、在根模組中app.module.ts中引入上面安裝的模組

  import { TranslateModule, TranslateLoader } from '@ngx-translate/core'
   
  ;
  import { TranslateHttpLoader } from '@ngx-translate/http-loader';
  

• 5、在assets資料夾中新建i18n資料夾新增兩個json檔案
  
  • zh-CN.json
  • en.json
• 6、zh-CN.json檔案表示中文內容

{
     "title": "我是需要翻譯的",
     "hello": "你好",
     "get-lang": "獲取語言型別",
     "content": "你好世界"
 }

• 7、en.json檔案表示英文下內容

{
    "title": "title",
    "hello
 
": "Hi",
    "get-lang": "getlang",
    "content": "hello word"
}

• 8、繼續在app.module.ts檔案中新增內容

....
    export function HttpLoaderFactory(http:Http){
          return new TranslateHttpLoader(http, './assets/i18n/', '.json');
    }
    ....
    @NgModule:({
        ...
        imports:[
            TranslateModule.forRoot({
                loader:{
                    provide:TranslateLoader,
                    useFactory:HttpLoaderFactory,
                    deps:[Http]
                }
            })
        ]
        ...
 

    })

• 9、在Page3Component.ts檔案中新增引入

import { TranslateService } from '@ngx-translate/core'

• 10、在Page3Component.ts書寫中英文切換

export class Page3Component implements OnInit {   
        constructor(private translate: TranslateService) {
            //新增語言支援
            translate.addLangs(['zh-CN', 'en']);
            //設定預設語言，一般在無法匹配的時候使用
            translate.setDefaultLang('zh-CN');

            //獲取當前瀏覽器環境的語言比如en、 zh
            let broswerLang = translate.getBrowserLang();
            translate.use(broswerLang.match(/en|zh-CN/) ? broswerLang : 'zh-CN');
        }
        //定義在select上下拉獲取值的方法
        changeLang(lang) {
            console.log(`我是下拉框獲取的值:${lang}`);
            //設定當前使用什麼語言
            this.translate.use(lang);
        }
        //點選按鈕獲取當前是什麼語音
        toggleLang() {
            console.log("我是點選按鈕的:",this.translate.getBrowserLang());
            //獲取語言風格，相當於更詳細的語言型別，比如zh-CN、zh-TW、en-US
            console.log("我是點選按鈕的:",this.translate.getBrowserCultureLang());
        }
        ngOnInit() {

        }

    }

• 11、在Page3Component.html書寫頁面

<div>
        <h2>{{ 'title' | translate }}</h2>
        <label>{{ 'hello' | translate }}
            <select #langSelect (change)="changeLang(langSelect.value)">
            <option *ngFor="let lang of translate.getLangs()" [value]="lang" [selected]="lang === translate.currentLang">{{ lang }}</option>
            </select>
        </label>
        <p>{{'content' | translate}}</p>
    </div>
    <button (click)="toggleLang()">{{'get-lang' | translate}}</button>