本文轉自：http://www.cnblogs.com/crazyprogrammer/p/7904436.html

1. 核心內容

使用Angular2的國際化(i18n)庫：ngx-translate

官網地址：http://www.ngx-translate.com/

GitHub地址：https://github.com/ngx-translate/core

官網和GitHub都有詳細的使用說明，也有demo可供參考。下面大體介紹一下使用辦法。

2. 安裝ngx-translate

npm install @ngx-translate/core @ngx-translatetp-loader –save

說明：由於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，導致的編譯錯誤。

此問題的解決辦法就是，在安裝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/[email protected] –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不是懶加載的，則直接忽略本條內容。

[轉]Ionic國際化解決方案