Angular國際化方案：ngx-translate

效果圖：

步驟一. 安裝依賴

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

@ngx-translate/core包含供翻譯的核心程序：TranslateService和一些管道。
@ngx-translate/http-loader從網絡服務器加載翻譯文件

步驟二. 在app.module.ts中初始化TranslateModule:

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

import { AppComponent } from './app.component';

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

@NgModule({
   declarations: [
       AppComponent
   ],
   imports: [
       BrowserModule,
       // ngx-translate and the loader module
       HttpClientModule,
       TranslateModule.forRoot({
           loader: {
               provide: TranslateLoader,
               useFactory: HttpLoaderFactory,
               deps: [HttpClient]
           }
       })
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

// required for AOT compilation
export function HttpLoaderFactory(http: HttpClient) {
   return new TranslateHttpLoader(http);
}

步驟三. 在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 {
    constructor(private translate: TranslateService) {
        translate.setDefaultLang('en');
    }
}

首先，必須構造函數中注入TranslateService。下一步是設置應用程序的默認語言 translate.setDefaultLang('en')。當然，也可以從用戶設置中加載語言。現在，重新加載應用程序會在瀏覽器控制檯中顯示錯誤：
加載資源失敗：服務器響應狀態爲404（未找到）http://localhost:4200/assets/i18n/en.json
這是因爲http加載器現在嘗試從服務器加載默認語言（en）。

步驟四. 在assets文件夾下新建i18n/en.json和zh.json

{
    "app": {
        "welcome": "Welcome",
        "themeSwitch": "Theme switch",
        "languageSwitch": "Language switch",
        "chinese": "Chinese"
    }
}

{
    "app": {
        "welcome": "歡迎",
        "themeSwitch": "主題切換",
        "languageSwitch": "語言切換",
        "chinese": "中文"
    }
}

步驟五. 在app.component.html中使用 translations

<span>{{ 'app.welcome' | translate }}</span>

步驟六. 在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 {
  constructor(private translate: TranslateService) {
    translate.setDefaultLang('en')
  }

  language: string;

  ngOnInit() {
    this.setLanguage();
  }

  changeLanguage(lan: string) {
    const language = localStorage.getItem('lan');
    if (lan !== language) {
      this.translate.use(lan);
      this.saveLanguage(lan);
    }
  }

  saveLanguage(lan: string) {
    localStorage.setItem(`lan`, lan);
  }

  setLanguage() {
    this.language = localStorage.getItem('lan') || 'en'
    this.translate.use(this.language);
  }
}