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

場景

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實現中英國際化(附代碼下載)

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章