【Angular】多國語系 NGX-Translate
Sep 7, 2018 · 2 min read
Angular 本身即有支援 i18n,由於 Angular 本身提供的 i18n,不同語系需要編譯不同版本,在實現多國語系切換時複雜且不好用,因此推薦大家使用NGX-Translate。
以下是簡單的 NGX-Translate 學習筆記
安裝
npm install @ngx-translate/core --saveUsage
- Import the TranslateModule
2. 使用TranslateHttpLoader 載入 "/assets/i18n/[lang].json" 語系檔
npm install @ngx-translate/http-loader --save3. 設定對應語系的 Json File(支援階層設定)。
4. 使用 Pipe Render 語係內容
<div>{{ 'HOME.TITLE' | translate }}</div><div>{{ 'HOME.WELCOME' | translate : {name: 'Allen'} }}</div>
Reference
ngx-translate/core
The internationalization (i18n) library for Angular - ngx-translate/core
github.com
Jeff 大大 Angular 讀書會的 ng-translate 教學影片
Sample
