Angular i18n（國際化方案）

一、引言

i18n（其來源是英文單詞 internationalization的首末字符i和n，18為中間的字符數）是“國際化”的簡稱。在資訊領域，國際化(i18n)指讓產品（出版物，軟件，硬件等）無需做大的改變就能夠適應不同的語言和地區的需要。對程序來說，在不修改內部代碼的情況下，能根據不同語言及地區顯示相應的界面。 在全球化的時代，國際化尤為重要，因為產品的潛在用戶可能來自世界的各個角落。通常與i18n相關的還有L10n（“本地化”的簡稱）。
Angular 將使用 @ngx-translate/core 和 @ngx-translate/http-loader實現國際化方案。

二、實現

1.安裝

根據Angular 版本選擇好對應的版本號

npm install @ngx-translate/core@9.1.1 --save
npm install @ngx-translate/http-loader@2.0.1 --save　

 2.在app.module.ts配置

// app.module.ts

import {BrowserModule} from '@angular/platform-browser';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {NgModule} from '@angular/core';
import {AppRoutingModule} from './app-routing.module';
import {FormsModule} from '@angular/forms';
import {HttpClient, HttpClientModule} from '@angular/common/http';
import {TranslateHttpLoader} from '@ngx-translate/http-loader';
import {TranslateLoader, TranslateModule} from '@ngx-translate/core';

// 這里配置
export function createTranslateHttpLoader(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    HttpClientModule,
    BrowserAnimationsModule,
    // 在這里配置
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (createTranslateHttpLoader),
        deps: [HttpClient]
      }
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}

3.新建json文件

在assets 新建文件夾 i18n,在i18n文件下下新建zh.json 和 en.json 文件，分別表示中文和英文。

// zh.json 不要在json文件寫注釋，會報錯
{
  "hello": "你好",
  "header": {
   "author": "早上好"
  }
}

//  en.json  不要在json文件寫注釋，會報錯
{
  "hello": "Hello",
  "header": {
   "author": "Good morning"
  }
}

4.獲取瀏覽器默認語言

app.component.ts 文件獲取瀏覽器默認語言，如果不是英語和中文，就默認設置為中文。

import {Component, OnInit} from '@angular/core';
import {TranslateService} from '@ngx-translate/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'app';

  constructor(public translateService: TranslateService) {
  }

  ngOnInit() {
    /* --- set i18n begin ---*/
    this.translateService.addLangs(['zh', 'en']);
    this.translateService.setDefaultLang('zh');
    const browserLang = this.translateService.getBrowserLang();
    this.translateService.use(browserLang.match(/zh|en/) ? browserLang : 'zh');
    /* --- set i18n end ---*/
  }
}

5.通過以上配置，即可根據瀏覽器語言設置來加載國際化語言

<h1>{{'hello' | translate}}</h1>  
<h1>{{'header.author' | translate}}</h1>  // 嵌套的這樣書寫

6.手動選擇語言

<button (click)="changeLanguage(language)">{{ languageBtn}}</button>

  languageBtn;
  language;

  constructor(public translateService: TranslateService) {
  }

  ngOnInit() {
    const browserLang = this.translateService.getBrowserLang();
    this.settingBtn(browserLang);
  }

  /*設置btn的文字和需要傳遞的參數*/
  settingBtn(language: string) {
    if (language === 'zh') {
      this.languageBtn = 'English';
      this.language = 'en';
    } else {
      this.languageBtn = '中文';
      this.language = 'zh';
    }
  }

  /*切換語言*/
  changeLanguage(lang: string) {
    console.log(lang);
    this.translateService.use(lang);
    this.settingBtn(lang);
  }