簡介
本篇將說明如何為您的 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.線上範例
