1. 核心內容html
使用Angular2的國際化(i18n)庫:ngx-translategit
官網地址:http://www.ngx-translate.com/github
GitHub地址:https://github.com/ngx-translate/corenpm
官網和GitHub都有詳細的使用說明,也有demo可供參考。下面大致介紹一下使用辦法。json
2. 安裝ngx-translateapp
npm install @ngx-translate/core @ngx-translatetp-loader –saveionic
說明:因爲Angular4.3.0版本以前,Http是從@angular/http注入;可是從Angular4.3.0以後,官方對此進行了調整,改成從@angular/common/http注入。而ngx-translate官方已升級至最新版本的angular,因此部分人在執行完上面的npm install命令,安裝完ngx-translate以後,運行ionic時系統會提示:Cannot find the '@angular/common/http' module 的錯誤,這是因爲你的Ionic工程使用的angular的相關庫版本仍是在4.3.0以前,卻使用了最新的ngx-translate,致使的編譯錯誤。ide
此問題的解決辦法就是,在安裝ngx-translate以前,先檢查一下你項目中angular相關庫的版本,項目文件夾根目錄,找到package.json文件,裏面就有@angular相關的版本號,好比:函數
若是版本號在4.3.0以上,則直接執行最新的安裝命令:npm install @ngx-translate/core @ngx-translatetp-loader –save便可;若是版本號在4.3.0如下,則咱們須要安裝一個低版本的http-loader,以免http由於版本使用不一致致使的編譯錯誤,好比我這裏使用的就是0.1.0版本的http-loader,那麼整個的安裝語句是:npm install @ngx-translate/core @ngx-translate/http-loader@0.1.0 –save翻譯
3. Import到應用的NgModule
(1) 打開項目的app.module.ts文件,導入如下內容:
import { TranslateModule, TranslateLoader,TranslateService } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
(2) 在NgModule中導入如下內容:
(3) 別忘了在providers裏面加上TranslateService
(4) 第3步裏面,細心的人會發現有個HttpLoaderFactory,這個就是咱們要添加的用來讀取i18n中的語言json文件的TranslateLoader函數,代碼以下:
(5) app.module.ts文件裏面,要添加的內容就是這些。下面繼續。
4. 設置默認語言
打開app.component.ts文件,這是我項目的第一個component,我把設置默認語言的代碼加在這裏:
在構造函數中:
代碼裏面設置語言,就是各語言對應的json文件,zh我存放的是簡體中文,en則是英文,下面會描述。
5. i18n各語言文件
語言文件,放到項目目錄,src,assets,i18n下,好比:
這樣就和上面TranslateLoader加載的路徑是一致的。具體每一個jons文件,就是系統中所用的各類語言文字了,好比:
6. 怎麼讀取json文件的具體內容?
(1) 在html模板中,讀取方法是:{{ 'LOGIN_TITLE' | translate }},其中LOGIN_TITLE就是keyname,經過translate pipe翻譯成對應的value。
本來使用雙引號」」的地方,直接寫到引號裏面便可,好比:
(2) 在ts文件中,寫法相對複雜一點:首先須要導入:
import { TranslateService } from '@ngx-translate/core';
經過TranslateService的observable獲得的值,就是翻譯後的value。其中’LOGIN_ERROR’就是json文件裏面的key name。
(3) 關於ts文件中使用TranslateService,必定要注意區分懶加載的page,這一點單獨在第7條中說明。
7. 關於懶加載的Page
若是你的page是懶加載的,必定不要忘了在對應的page.module.ts文件中,import TranslateModule,好比上面的login.module.ts:
若是你的page不是懶加載的,則直接忽略本條內容。