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);
});
}
}