Ionic國際化解決方案


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/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不是懶加載的,則直接忽略本條內容。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM