Ionic4国际化实战

背景

现在很多企业都早布局国际化战略，而且国际化也是大势所趋。在各种App大行其道的当下，国际化也是很多开发者要考虑的问题之一。对于h5小规模团队，个人开发者使用Ionic进行App开发还是个不错的选择，今天就说说在Ionic4中实现国际化的过程。

实现效果

先上2张效果图

前置条件

要在Ionic4（基于Angular）项目中支持国际化首先要在项目中安装2个Angular模块：

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

国际化实现过程

1、准备资源文件

在src/assets目录下创建子目录i18n，并新建2个json文件分别为zh.json和en.json
如下图:

抽离系统中的语言元素至zh.json和en.json中
zh.json部分内容如下：

{
    "generic_en_language": "英语",
    "generic_zh_language": "简体中文",
    "generic_goback": "返回",
    "generic_start": "立即体验",
    "generic_update": "您必须升级应用才能进行登录操作！",
    "generic_fail_login": "登录失败，请重新登录！",
    "generic_loading_login": "登录中...",
    "generic_languageSwitch": "语言切换中...",
    "generic_systemPrompt": "系统提示",
    "generic_fail_http": "获取数据失败",
    "generic_error_http": "系统繁忙，请稍后再试",
    "generic_error_network": "网络异常，不能连接到服务器！"
}

en.json部分内容如下：

{
    "generic_en_language": "English",
    "generic_zh_language": "Simplified Chinese",
    "generic_goback": "Back",
    "generic_start": "Go Now!",
    "generic_update": "You must update the application!",
    "generic_fail_login": "Login failed! Please try again.",
    "generic_loading_login": "logging in...",
    "generic_languageSwitch": "Language is switching...",
    "generic_systemPrompt": "System prompt",
    "generic_fail_http": "Failed to get data",
    "generic_error_http": "System busy, please try again later",
    "generic_error_network": "Network exception, unable to connect to server!"
}

2、修改app.module.ts

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy, Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { HttpClient, HttpClientModule } from '@angular/common/http';
import { TranslateLoader, TranslateModule, TranslateService } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

import { WongoingModule } from './wongoing/wongoing.module';

/**
 * 导出加载函数
 * @param http HttpClient对象
 */
export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    }),
    WongoingModule],
  exports: [
    TranslateModule
  ],
  providers: [
    StatusBar,
    SplashScreen,
    TranslateService,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
  // 默认语言
  private lang: any = 'zh';

  constructor(private platform: Platform, public translate: TranslateService) {
    platform.ready().then(async () => {
      this.initTranslateConfig();
    });
    console.log('App start...');
  }

  public initTranslateConfig() {
    console.log('initTranslateConfig...');
    // 添加要支持的语言
    this.translate.addLangs(['zh', 'en']);
    // 设置默认语言
    this.translate.setDefaultLang(this.lang);
    // 语言切换处理
    this.translate.use(this.lang).subscribe(() => {
      console.log('语言切换=' + this.lang);
    });
  }
}

app.module.ts中的关键代码1，导入国际化所需要的模块

import { TranslateLoader, TranslateModule, TranslateService } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

app.module.ts中的关键代码2，导出加载资源文件函数

/**
 * 导出加载函数
 * @param http HttpClient对象
 */
export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

app.module.ts中的关键代码3，修改@NgModule，在导入列表中增加TranslateModule，如下：

imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    }),

app.module.ts中的关键代码4，修改@NgModule，在导出列表中增加TransalteModule，如下：

exports: [
    TranslateModule
  ],

app.module.ts中的关键代码5，修改AppModule类，在构造方法中传入platform和translate对象，并定义设置默认语言的方法，如下：

export class AppModule {
  // 默认语言
  private lang: any = 'zh';

  constructor(private platform: Platform, public translate: TranslateService) {
    platform.ready().then(async () => {
      this.initTranslateConfig();
    });
    console.log('App start...');
  }

  public initTranslateConfig() {
    console.log('initTranslateConfig...');
    // 添加要支持的语言
    this.translate.addLangs(['zh', 'en']);
    // 设置默认语言
    this.translate.setDefaultLang(this.lang);
    // 语言切换处理
    this.translate.use(this.lang).subscribe(() => {
      console.log('语言切换=' + this.lang);
    });
  }
}

3、在所有需要显示语言元素的页面中文本的双向绑定中使用translate，如下所示：

langset.page.html

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button text="{{ 'generic_goback' | translate }}"></ion-back-button>
    </ion-buttons>
    <ion-title>{{ 'meComSet_translate' | translate }}</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-list>
    <ion-radio-group>
      <ion-list-header>

      </ion-list-header>
      <ion-item>
        <ion-label>{{ 'generic_zh_language' | translate }}</ion-label>
        <ion-radio value="zh" [checked]="getChecked('zh')" (click)="changeLanguage('zh')"></ion-radio>
      </ion-item>
      <ion-item>
          <ion-label>{{ 'generic_en_language' | translate }}</ion-label>
          <ion-radio value="en" [checked]="getChecked('en')" (click)="changeLanguage('en')"></ion-radio>
        </ion-item>
    </ion-radio-group>
  </ion-list>
</ion-content>

关键代码：text="{{ ‘generic_goback’ | translate}}"，其中generic_goback就是在zh.json和en.json中定义的资源项。

3、实现语言切换

langset.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';

import { IonicModule } from '@ionic/angular';
import { TranslateModule } from '@ngx-translate/core';

import { LangsetPage } from './langset.page';

const routes: Routes = [
  {
    path: '',
    component: LangsetPage
  }
];

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild(routes),
    TranslateModule
  ],
  declarations: [LangsetPage]
})
export class LangsetPageModule {}

langset.page.ts

import { Component, OnInit } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'app-langset',
  templateUrl: './langset.page.html',
  styleUrls: ['./langset.page.scss'],
})
export class LangsetPage implements OnInit {

  constructor(private translate: TranslateService) { }

  ngOnInit() {
  }
  /**
   * 获取选中状态
   * @param lang 传入的语言
   */
  public getChecked(lang: any) {
    if (lang === this.translate.getDefaultLang()) {
      return true;
    } else {
      return false;
    }
  }
  /**
   * 更改当前语言
   * @param lang 要更改的语言
   */
  public changeLanguage(lang: any) {
    console.log('lang=' + lang);
    this.translate.setDefaultLang(lang);
    this.translate.use(lang).subscribe(() => {
      console.log('语言切换=' + lang);
    });
  }
}