【Angular】多國語系 NGX-Translate

Allen Huang
Sep 7, 2018 · 2 min read

Angular 本身即有支援 i18n,由於 Angular 本身提供的 i18n,不同語系需要編譯不同版本,在實現多國語系切換時複雜且不好用,因此推薦大家使用NGX-Translate

以下是簡單的 NGX-Translate 學習筆記

安裝

npm install @ngx-translate/core --save

Usage

  1. Import the TranslateModule

2. 使用TranslateHttpLoader 載入 "/assets/i18n/[lang].json" 語系檔

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

3. 設定對應語系的 Json File(支援階層設定)。

4. 使用 Pipe Render 語係內容

<div>{{ 'HOME.TITLE' | translate }}</div><div>{{ 'HOME.WELCOME' | translate : {name: 'Allen'} }}</div>

Reference

Jeff 大大 Angular 讀書會的 ng-translate 教學影片

Sample

Allen的技術筆記

工作上學到什麼就寫些什麼!!!

Allen Huang

Written by

Allen的技術筆記

工作上學到什麼就寫些什麼!!!