在之前的文章中，我們討論了國際化Angular應用程序的不同方法:內(nèi)置的I18n解決方案和支持上下文翻譯編輯。在本文中，我們將向前邁進一步，學習如何在ngx-translate模塊的幫助下翻譯Ionic應用程序。如你所知，Ionic是一個基于Angular的框架，它允許創(chuàng)建跨平臺的移動應用程序。它于2013年首次推出，最近發(fā)布了最新版本4。

我們的議程包括以下主題:

如何創(chuàng)建Ionic 4應用程序

將ngx翻譯模塊集成到應用程序中。

設置默認區(qū)域設置并切換到另一個區(qū)域設置。

如何使用HTTP客戶端存儲翻譯并加載它們？

執(zhí)行實際平移并提供插值參數(shù)。

在課堂上使用翻譯

那么，我們該開始了嗎？

先決條件

如果您想學習本教程，請安裝以下軟件:

NodeJS版本10或更高版本和NPM。早期版本也可以使用，但Ionic 4應用程序編譯起來要慢得多。

Ionic 4，這是寫這篇文章時的最新版本。要安裝它，請運行npm install -g ionic并按照給出的說明進行操作。請注意，版本4目前不穩(wěn)定，因此安裝程序可能會詢問您是否要選擇版本3。

這就是了。完成后，運行以下命令創(chuàng)建一個新的Ionic應用程序:

這里的Tabs只是要使用的模板的名稱。

接下來，在完成這個命令后，您應該能夠cd到翻譯目錄并運行:

因此，服務器將會啟動，您的瀏覽器應該會在localhost:8100打開一個包含一些模板內(nèi)容的頁面。

集成Ngx-翻譯

為了翻譯我們的Ionic應用程序，我們需要一個ngx-translate模塊，這是Angular愛好者創(chuàng)建的第三方解決方案。你可能會問我們?yōu)槭裁床挥脙?nèi)置的角度模塊？嗯，很遺憾，Ionic 4目前還不支持這個模塊，看來近期也不會推出了。所以，我們還是堅持ngx-translate:

除了核心庫，我們還安裝了http-loader，它將為我們加載JSON文件。

現(xiàn)在讓我們導入所有必要的模塊。打開src/app/app.module.ts文件并添加以下行:

接下來，定義導出的翻譯加載器函數(shù):

這個加載器將從我們將要創(chuàng)建的assets/i18n文件夾中獲取JSON文件。

最后，將所有這些模塊添加到imports屬性:

設置默認區(qū)域設置

為了提供默認的語言環(huán)境，我們需要修改src/app/app.component.ts文件:

這里我們將英語設置為默認語言環(huán)境。如果要切換語言，請說明。translate.use('LANG_CODE ')。請注意，如果不這樣做，請稍后添加這一行setDefaultLang，語言更改后頁面上的文本將不會更新(這一定是ngx-translate錯誤)。

執(zhí)行簡單的翻譯

好了，現(xiàn)在我們來翻譯一下！導航到src/app/tab1/tab1.page.html文件，并按如下方式調(diào)整選項卡的標題:

這里我們使用翻譯管道并提供翻譯鍵(tab1.tabName)。要指定這種轉(zhuǎn)換，請在assets/i18n文件夾中創(chuàng)建兩個文件:

en.json

ru.json

當然，你可以自由選擇任何其他語言環(huán)境，但我會堅持使用英語和俄語。

翻譯關鍵字中的點表示嵌套，因此文件應該包含以下內(nèi)容:

en.json

ru.json

嵌套(或命名空間)是一種非常有用的技術，因為它允許您將相關的翻譯組合在一起。通過這種方式，您可能擁有諸如blogs或administrators之類的名稱空間。此外，不同名稱空間中的鍵可能具有相同的名稱。

我們需要執(zhí)行最后一步才能讓它正常工作(是的，我知道，總有一些“最后一步”和“最后幾步”)。打開src/app/tab1/tab1.module.ts文件，并對其進行如下修改:

通過這種方式，我們可以為給定的模塊啟用管道。

執(zhí)行上述步驟后，重新加載服務器。您應該看到第一個選項卡的標題現(xiàn)在有了正確的翻譯。

將參數(shù)傳遞給翻譯器

在某些情況下，您可能需要將參數(shù)傳遞給轉(zhuǎn)換器，并將它們插入到輸出字符串中。讓我告訴你怎么做:

這里我們把它翻譯成p標簽。此外，請注意translateParams將實際參數(shù)的屬性作為對象傳遞。Lang是參數(shù)名，不是語言值。Tab1.invite是我們的翻譯鍵。

現(xiàn)在為該鍵提供一個值:

ru.json

en.json

這{{lang}}是一個插值函數(shù)-和的值被替換為語言模板的pass屬性。

現(xiàn)在，語言應該在某個地方定義變量，所以讓我們在tab1.page.ts文件中這樣做:

我發(fā)現(xiàn)了兩行代碼:

導入翻譯服務

獲取當前使用的語言并將其存儲在變量中。

最后，重新加載頁面，觀察結(jié)果！

切換區(qū)域設置

當然，用戶應該能夠使用某種界面來切換應用程序的語言環(huán)境。我們現(xiàn)在寫這個函數(shù)！

首先，通過添加新的選擇框來調(diào)整標簽:

這里發(fā)生了什么？

我們正在添加一個名為“Language”的新項目(帶有translate屬性)。

此項目包含綁定到語言模型的選擇框。

每當選擇新值時，就會觸發(fā)languageChange()方法。

選擇框還有一個用于翻譯的占位符。

接下來，通過修改tab1.page.ts文件來處理事件處理程序:

通過說this.translateService.use()，我們實際上是在切換語言環(huán)境。

此外，讓我們處理標簽和占位符的翻譯:

ru.json

en.json

請注意，我沒有語言來提供英語地區(qū)的鍵。為什么？好的，因為如果模塊找不到翻譯鍵，就簡單的打印出來。對于英語語言環(huán)境來說，這是完全可能的。當然，你可能會說“語言”:“語言”。

在課堂上進行翻譯

有時你可能想在課程中使用你的翻譯。我舉個簡單的例子。

首先，調(diào)整tab1.page.ts文件，如下所示:

讓我們一步一步來:

創(chuàng)建一個新屬性，稍后我們將在模板中顯示它。

以編程方式加載英語區(qū)域設置的新翻譯。請注意，這樣做，我們已經(jīng)有效地消除了所有現(xiàn)有的翻譯！

提供帶插值的平移

在somePropertykey下轉(zhuǎn)換(并為插值傳遞值)。我們正在訂閱一個活動，所以一旦有了回應。......

...我們將收到的值賦給someProperty屬性。

因此，您可以使用tab1.page.html模板中的翻譯:

PhraseApp和翻譯文件

當然，使用翻譯文件并不容易，尤其是當應用程序很大并且支持多種語言時。您可能很容易錯過某些語言的翻譯，這可能會導致用戶的困惑。PhraseApp可以讓你的生活更輕松:抓住你的14天試用期！

當然，PhraseApp支持許多不同的語言和框架，包括JavaScript。它允許輕松導入和導出翻譯數(shù)據(jù)。什么是酷？可以很快知道缺了哪些翻譯鍵，因為在大型應用程序中使用多種語言時很容易丟失。最重要的是，你可以和翻譯合作，因為專業(yè)的本地化你的網(wǎng)站更好。

結(jié)論

在本文中，我們學習了如何在ngx-translate模塊的幫助下翻譯Ionic應用程序。你已經(jīng)學會了如何提供和加載翻譯，如何切換語言環(huán)境，如何執(zhí)行插值以及如何在類中使用翻譯。

因此，正如你所看到的，本地化離子應用和轉(zhuǎn)換角度應用之間沒有太大的區(qū)別——因為這兩種技術有許多相似之處。我希望您現(xiàn)在已經(jīng)準備好應用實際項目中描述的概念了！一如既往，我感謝你陪我到下次。