場景
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');
});
}
運行看效果
示例代碼下載
見下面文章末尾