場景

Ionic介紹以及搭建環境、新建和運行項目：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/106308166

在上面搭建起來項目的基礎上，實現中英國際化的切換。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。

實現

安裝ngx-translate模塊

使用VSCode打開項目并打開package.json，沒有安裝ngx-translate模塊是這樣

?

在項目下打開命令行或者在VSCode中打開終端

npm install --save @ngx-translate/core

?

npm install --save @ngx-translate/http-loader

?

安裝完這兩個模塊后再打開package.json就可以看到已經添加成功這兩個模塊

?

模塊源碼地址：https://github.com/ngx-translate/core

?

模塊app.module.ts中引入該模塊

打開項目的app.module.ts

引入模塊

//HttpClient import {HttpClient, HttpClientModule} from '@angular/common/http'; //引入國際化資源 import { TranslateModule, TranslateLoader } from '@ngx-translate/core'; import { TranslateHttpLoader } from '@ngx-translate/http-loader'; export function HttpLoaderFactory(httpClient: HttpClient) {return new TranslateHttpLoader(httpClient); }

然后聲明

@NgModule({declarations: [AppComponent],entryComponents: [],imports: [BrowserModule,IonicModule.forRoot(),AppRoutingModule,HttpClientModule,TranslateModule.forRoot({loader: {provide: TranslateLoader,useFactory: HttpLoaderFactory,deps: [HttpClient]}})],providers: [StatusBar,SplashScreen,{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],bootstrap: [AppComponent] }) export class AppModule {}

具體添加位置見下圖

?

新建國際化資源

在項目的assets下新建文件夾i18n在文件夾下新建兩個json文件en.json和zh-CN.json存儲中英兩個資源文件

?

zn-CN.json

{"badao": "霸道的","liumang": "程序猿" }

en.json

{"badao": "Domineering","liumang": "Code Monkey" }

添加并設置國際化資源

打開項目的app.component.ts

引入并聲明TranslateService

import { TranslateService } from '@ngx-translate/core';export class AppComponent {constructor(private platform: Platform,private splashScreen: SplashScreen,private statusBar: StatusBar,public translate:TranslateService) {this.initializeApp();}

?

然后在初始化的方法initializeApp中加載國際化文件并設置當前的國際化文件

設置選擇中文

? initializeApp() {this.platform.ready().then(() => {this.statusBar.styleDefault();this.splashScreen.hide();//裝載國際化資源文件this.translate.addLangs(['en', 'zh-CN']);//設置默認國際化資源文件this.translate.setDefaultLang('zh-CN');//獲取當前瀏覽器環境的語言const browserLang = this.translate.getBrowserLang();this.translate.use(browserLang.match(/en|zh-CN/) ? browserLang : 'zh-CN');});

?

在相應的組件中使用Translate服務

比如我想在tab1這個模塊中使用國際化服務，打開tab1.module.ts，引入并聲明模塊

import { TranslateModule } from '@ngx-translate/core' ;@NgModule({imports: [IonicModule,CommonModule,FormsModule,ExploreContainerComponentModule,Tab1PageRoutingModule,TranslateModule],declarations: [Tab1Page] }) export class Tab1PageModule {}

然后打開tab1.page.html

<div><h1>公眾號：</h1>{{ 'badao' | translate }}{{ 'liumang' | translate }} </div>

然后運行項目查看tab1的頁面

?

如果想要修改為英文的話，只需要打開app.component.ts,修改為

? initializeApp() {this.platform.ready().then(() => {this.statusBar.styleDefault();this.splashScreen.hide();//裝載國際化資源文件this.translate.addLangs(['en', 'zh-CN']);//設置默認國際化資源文件this.translate.setDefaultLang('en');//獲取當前瀏覽器環境的語言const browserLang = this.translate.getBrowserLang();this.translate.use(browserLang.match(/en|zh-CN/) ? browserLang : 'en');});}

運行看效果

?

示例代碼下載

見下面文章末尾

Ionic+Angular實現中英國際化(附代碼下載)

總結

以上是生活随笔為你收集整理的Ionic+Angular实现中英国际化(附代码下载)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。