angular多語系-ngx-translate

簡介

本篇將說明如何為您的 Angular 專案添加多語系檔案。
我們將使用 ngx-translate

ngx-translater概述

以下是官方網站說明:
NGX-Translate是Angular的國際化庫。它使您可以為內容定義不同語言的翻譯，並在它們之間輕鬆切換。
它使您可以訪問服務，指令和管道以處理任何動態或靜態內容。
NGX-Translate也非常模塊化。它的編寫方式可以非常輕鬆地用自定義實現替換任何部分，以防現有的部分不符合您的需求。

官方網站 : NGX-Translate
guthub : NGX-Translate GitHub

1.安裝多語系模組 ngx-translate

@ngx-translate/core -- 為該庫主要部分。

  npm install @ngx-translate/core --save

@ngx-translate/http-loader -- ngx-translate的加載程序，可讓您使用http加載翻譯檔案:.json。

  npm install @ngx-translate/http-loader --save

2.設定 app.module.ts

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

  import { AppRoutingModule } from './app-routing.module';
  import { AppComponent } from './app.component';

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

  import {LanguageNamePipe} from './pipe';


  let i18nurl= '/assets/i18n/';
  export function HttpLoaderFactory(http: HttpClient) {
    return new TranslateHttpLoader(http, i18nurl, ".json");
  }


  @NgModule({
    declarations: [
      AppComponent,
      LanguageNamePipe,
    ],
    imports: [
      BrowserModule,
      AppRoutingModule,
      HttpClientModule,
      TranslateModule.forRoot({
        loader: {
          provide: TranslateLoader,
          useFactory: HttpLoaderFactory,
          deps: [HttpClient]
        }
      })
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }

3.設定 app.component.html

在 app.component.html 設定一個語言選擇器。

   
  <label style="width:100%;text-align: right;margin-top:25px;padding-right:30px;" >
    {{ 'HOME.SELECT' | translate }}  
    <select class="form-control" #langSelect (change)="translate.use(langSelect.value);changeLanguage(langSelect.value)" style="width:110px;"> 
    <option *ngFor="let lang of translate.getLangs()" [value]="lang" [selected]="lang === translate.currentLang">{{ lang | language_name}}</option>
      </select>
  </label>
  

4.增加一個 pipe

我們發現上述步驟 3. 需要一個 pipe 來過濾 select 選單的 en/jp/zh-tw 選項 (option選項)，
所以需要增加一個 pipe 。

如下方程式碼，再將 pipe 加入到 app.module.ts 即可。 上方步驟 2.設定 app.module.ts 的程式已包含加入 LanguageNamePipe 的程式。

  import { Pipe, PipeTransform } from '@angular/core';

  @Pipe({
      name: 'language_name',
  })
  
  export class LanguageNamePipe implements PipeTransform {
      transform(str: any): any {
          var cname='';
          switch(str){
              case("en"):
                  cname="English";
              break;
              case("zh-tw"):
                  cname="正體中文";
              break;
              case("jp"):
                  cname="日本語";
              break;
              case(""):
                  cname="";
              break;
          }
          return cname;
      }
  }
  

5.設定 app.component.ts

在 app.component.ts 設定載入語言檔案。

app.component.ts

  import { Component } from '@angular/core';
  import {TranslateService} from '@ngx-translate/core';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
  })
  export class AppComponent {
    title = 'language';
    constructor(public translate: TranslateService) {
      var lang = localStorage.getItem('language');//取得預設語言
  
      if(lang==null ||  lang==""){
        lang =navigator.language.toLowerCase() ;//判斷瀏覽器語言 en/jp/zh-tw，並轉為小寫
      }
      translate.addLangs(["en", "zh-tw","jp"]); //加入語系列表。目前此專案有三個語系
      translate.setDefaultLang(lang);// 設定預設語言
      translate.use(lang);//載入預設語言
    }
  
    /**
     * 在選擇語言的時候設定 localStorage
     * @param language : en/jp/zh-tw
     */
    changeLanguage(language:string){
      localStorage.setItem('language', language);
    }
  
  }
  

6.其他 component 用法

可以在 component 的 html 頁面直接使用即可，ts 不須加入任何程式。
如下範例:

  {{ 'HOME.SELECT' | translate }} 

7.線上範例

線上範例