在之前的文章中，我們討論了國(guó)際化Angular應(yīng)用程序的不同方法:內(nèi)置的I18n解決方案和支持上下文翻譯編輯。在本文中，我們將向前邁進(jìn)一步，學(xué)習(xí)如何在ngx-translate模塊的幫助下翻譯Ionic應(yīng)用程序。如你所知，Ionic是一個(gè)基于Angular的框架，它允許創(chuàng)建跨平臺(tái)的移動(dòng)應(yīng)用程序。它于2013年首次推出，最近發(fā)布了最新版本4。
我們的議程包括以下主題:
如何創(chuàng)建Ionic 4應(yīng)用程序
將ngx翻譯模塊集成到應(yīng)用程序中。
設(shè)置默認(rèn)區(qū)域設(shè)置并切換到另一個(gè)區(qū)域設(shè)置。
如何使用HTTP客戶端存儲(chǔ)翻譯并加載它們？
執(zhí)行實(shí)際平移并提供插值參數(shù)。
在課堂上使用翻譯
那么，我們?cè)撻_(kāi)始了嗎？
先決條件如果您想學(xué)習(xí)本教程，請(qǐng)安裝以下軟件:
NodeJS版本10或更高版本和NPM。早期版本也可以使用，但I(xiàn)onic 4應(yīng)用程序編譯起來(lái)要慢得多。
Ionic 4，這是寫(xiě)這篇文章時(shí)的最新版本。要安裝它，請(qǐng)運(yùn)行npm install -g ionic并按照給出的說(shuō)明進(jìn)行操作。請(qǐng)注意，版本4目前不穩(wěn)定，因此安裝程序可能會(huì)詢問(wèn)您是否要選擇版本3。
這就是了。完成后，運(yùn)行以下命令創(chuàng)建一個(gè)新的Ionic應(yīng)用程序:
這里的Tabs只是要使用的模板的名稱。
接下來(lái)，在完成這個(gè)命令后，您應(yīng)該能夠cd到翻譯目錄并運(yùn)行:
因此，服務(wù)器將會(huì)啟動(dòng)，您的瀏覽器應(yīng)該會(huì)在localhost:8100打開(kāi)一個(gè)包含一些模板內(nèi)容的頁(yè)面。
集成Ngx-翻譯為了翻譯我們的Ionic應(yīng)用程序，我們需要一個(gè)ngx-translate模塊，這是Angular愛(ài)好者創(chuàng)建的第三方解決方案。你可能會(huì)問(wèn)我們?yōu)槭裁床挥脙?nèi)置的角度模塊？嗯，很遺憾，Ionic 4目前還不支持這個(gè)模塊，看來(lái)近期也不會(huì)推出了。所以，我們還是堅(jiān)持ngx-translate:
除了核心庫(kù)，我們還安裝了http-loader，它將為我們加載JSON文件。
現(xiàn)在讓我們導(dǎo)入所有必要的模塊。打開(kāi)src/app/app.module.ts文件并添加以下行:
接下來(lái)，定義導(dǎo)出的翻譯加載器函數(shù):
這個(gè)加載器將從我們將要?jiǎng)?chuàng)建的assets/i18n文件夾中獲取JSON文件。
最后，將所有這些模塊添加到imports屬性:
設(shè)置默認(rèn)區(qū)域設(shè)置
為了提供默認(rèn)的語(yǔ)言環(huán)境，我們需要修改src/app/app.component.ts文件:
這里我們將英語(yǔ)設(shè)置為默認(rèn)語(yǔ)言環(huán)境。如果要切換語(yǔ)言，請(qǐng)說(shuō)明。translate.use('LANG_CODE ')。請(qǐng)注意，如果不這樣做，請(qǐng)稍后添加這一行setDefaultLang，語(yǔ)言更改后頁(yè)面上的文本將不會(huì)更新(這一定是ngx-translate錯(cuò)誤)。
執(zhí)行簡(jiǎn)單的翻譯好了，現(xiàn)在我們來(lái)翻譯一下！導(dǎo)航到src/app/tab1/tab1.page.html文件，并按如下方式調(diào)整選項(xiàng)卡的標(biāo)題:
這里我們使用翻譯管道并提供翻譯鍵(tab1.tabName)。要指定這種轉(zhuǎn)換，請(qǐng)?jiān)赼ssets/i18n文件夾中創(chuàng)建兩個(gè)文件:
en.json
ru.json
當(dāng)然，你可以自由選擇任何其他語(yǔ)言環(huán)境，但我會(huì)堅(jiān)持使用英語(yǔ)和俄語(yǔ)。
翻譯關(guān)鍵字中的點(diǎn)表示嵌套，因此文件應(yīng)該包含以下內(nèi)容:
en.json
ru.json
嵌套(或命名空間)是一種非常有用的技術(shù)，因?yàn)樗试S您將相關(guān)的翻譯組合在一起。通過(guò)這種方式，您可能擁有諸如blogs或administrators之類的名稱空間。此外，不同名稱空間中的鍵可能具有相同的名稱。
我們需要執(zhí)行最后一步才能讓它正常工作(是的，我知道，總有一些“最后一步”和“最后幾步”)。打開(kāi)src/app/tab1/tab1.module.ts文件，并對(duì)其進(jìn)行如下修改:
通過(guò)這種方式，我們可以為給定的模塊啟用管道。
執(zhí)行上述步驟后，重新加載服務(wù)器。您應(yīng)該看到第一個(gè)選項(xiàng)卡的標(biāo)題現(xiàn)在有了正確的翻譯。
將參數(shù)傳遞給翻譯器在某些情況下，您可能需要將參數(shù)傳遞給轉(zhuǎn)換器，并將它們插入到輸出字符串中。讓我告訴你怎么做:
這里我們把它翻譯成p標(biāo)簽。此外，請(qǐng)注意translateParams將實(shí)際參數(shù)的屬性作為對(duì)象傳遞。Lang是參數(shù)名，不是語(yǔ)言值。Tab1.invite是我們的翻譯鍵。
現(xiàn)在為該鍵提供一個(gè)值:
ru.json
en.json
這{{lang}}是一個(gè)插值函數(shù)-和的值被替換為語(yǔ)言模板的pass屬性。
現(xiàn)在，語(yǔ)言應(yīng)該在某個(gè)地方定義變量，所以讓我們?cè)趖ab1.page.ts文件中這樣做:
我發(fā)現(xiàn)了兩行代碼:
導(dǎo)入翻譯服務(wù)
獲取當(dāng)前使用的語(yǔ)言并將其存儲(chǔ)在變量中。
最后，重新加載頁(yè)面，觀察結(jié)果！
切換區(qū)域設(shè)置當(dāng)然，用戶應(yīng)該能夠使用某種界面來(lái)切換應(yīng)用程序的語(yǔ)言環(huán)境。我們現(xiàn)在寫(xiě)這個(gè)函數(shù)！
首先，通過(guò)添加新的選擇框來(lái)調(diào)整標(biāo)簽:
這里發(fā)生了什么？
我們正在添加一個(gè)名為“Language”的新項(xiàng)目(帶有translate屬性)。
此項(xiàng)目包含綁定到語(yǔ)言模型的選擇框。
每當(dāng)選擇新值時(shí)，就會(huì)觸發(fā)languageChange()方法。
選擇框還有一個(gè)用于翻譯的占位符。
接下來(lái)，通過(guò)修改tab1.page.ts文件來(lái)處理事件處理程序:
通過(guò)說(shuō)this.translateService.use()，我們實(shí)際上是在切換語(yǔ)言環(huán)境。
此外，讓我們處理標(biāo)簽和占位符的翻譯:
ru.json
en.json
請(qǐng)注意，我沒(méi)有語(yǔ)言來(lái)提供英語(yǔ)地區(qū)的鍵。為什么？好的，因?yàn)槿绻K找不到翻譯鍵，就簡(jiǎn)單的打印出來(lái)。對(duì)于英語(yǔ)語(yǔ)言環(huán)境來(lái)說(shuō)，這是完全可能的。當(dāng)然，你可能會(huì)說(shuō)“語(yǔ)言”:“語(yǔ)言”。
在課堂上進(jìn)行翻譯有時(shí)你可能想在課程中使用你的翻譯。我舉個(gè)簡(jiǎn)單的例子。
首先，調(diào)整tab1.page.ts文件，如下所示:
讓我們一步一步來(lái):
創(chuàng)建一個(gè)新屬性，稍后我們將在模板中顯示它。
以編程方式加載英語(yǔ)區(qū)域設(shè)置的新翻譯。請(qǐng)注意，這樣做，我們已經(jīng)有效地消除了所有現(xiàn)有的翻譯！
提供帶插值的平移
在somePropertykey下轉(zhuǎn)換(并為插值傳遞值)。我們正在訂閱一個(gè)活動(dòng)，所以一旦有了回應(yīng)。......
...我們將收到的值賦給someProperty屬性。
因此，您可以使用tab1.page.html模板中的翻譯:
PhraseApp和翻譯文件當(dāng)然，使用翻譯文件并不容易，尤其是當(dāng)應(yīng)用程序很大并且支持多種語(yǔ)言時(shí)。您可能很容易錯(cuò)過(guò)某些語(yǔ)言的翻譯，這可能會(huì)導(dǎo)致用戶的困惑。PhraseApp可以讓你的生活更輕松:抓住你的14天試用期！
當(dāng)然，PhraseApp支持許多不同的語(yǔ)言和框架，包括JavaScript。它允許輕松導(dǎo)入和導(dǎo)出翻譯數(shù)據(jù)。什么是酷？可以很快知道缺了哪些翻譯鍵，因?yàn)樵诖笮蛻?yīng)用程序中使用多種語(yǔ)言時(shí)很容易丟失。最重要的是，你可以和翻譯合作，因?yàn)閷I(yè)的本地化你的網(wǎng)站更好。
結(jié)論在本文中，我們學(xué)習(xí)了如何在ngx-translate模塊的幫助下翻譯Ionic應(yīng)用程序。你已經(jīng)學(xué)會(huì)了如何提供和加載翻譯，如何切換語(yǔ)言環(huán)境，如何執(zhí)行插值以及如何在類中使用翻譯。
因此，正如你所看到的，本地化離子應(yīng)用和轉(zhuǎn)換角度應(yīng)用之間沒(méi)有太大的區(qū)別——因?yàn)檫@兩種技術(shù)有許多相似之處。我希望您現(xiàn)在已經(jīng)準(zhǔn)備好應(yīng)用實(shí)際項(xiàng)目中描述的概念了！一如既往，我感謝你陪我到下次。
