场景

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实现中英国际化(附代码下载)相关推荐

Ionic+Angular+Express实现前后端交互使用HttpClient发送get请求数据并加载显示(附代码下载)
场景 Ionic介绍以及搭建环境.新建和运行项目: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/106308166 在上面搭建起 ...
ASP.NET的MVC中使用Cookie做身份验证(附代码下载)
场景 ASP.NET的MVC中使用Session做身份验证(附代码下载): https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/1071 ...
JPA中实现双向多对多的关联关系(附代码下载)
场景 JPA入门简介与搭建HelloWorld(附代码下载): https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/103473937 ...
Dubbo与SpringBoot整合流程(从实例入手，附代码下载)
场景 Dubbo环境搭建-管理控制台dubbo-admin实现服务监控: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/10362 ...
javax.servlet-api 简介、中文文档、中英对照文档下载
javax.servlet-api 文档下载链接(含jar包.源码.pom) 组件名称中文-文档-下载链接中英对照-文档-下载链接 javax.servlet-api-3.1.0.jar 暂无 ...
easyexcel 简介、中文文档、中英对照文档下载
easyexcel 文档下载链接(含jar包.源码.pom) 组件名称中文-文档-下载链接中英对照-文档-下载链接 easyexcel-3.0.5.jar easyexcel-3.0.5-API ...
commons-lang3 简介、中文文档、中英对照文档下载
commons-lang3 文档下载链接(含jar包.源码.pom) 组件名称中文-文档-下载链接中英对照-文档-下载链接 commons-lang3-3.10.jar commons-lang ...
itext 简介、中文文档、中英对照文档下载
itext 文档下载链接(含jar包.源码.pom) 组件名称中文-文档-下载链接中英对照-文档-下载链接 itext-2.1.7.jar itext-2.1.7-API文档-中文版.zip i ...
docx4j 简介、中文文档、中英对照文档下载
docx4j 文档下载链接(含jar包.源码.pom) 组件名称中文-文档-下载链接中英对照-文档-下载链接 docx4j-3.3.5.jar docx4j-3.3.5-API文档-中文版.zi ...