Integrate ngx-translate
official link
github:https://github.com/ngx-translate/core
Step 1:
Install
npm install @ngx-translate/core --save
npm install @ngx-translate/http-loader --save
Step 2:
Import TranslateModule, first import TranslateModule and add the following code under app.module.ts
// 导入包
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
// 增加方法
// The translate loader needs to know where to load i18n files
// in Ionic's static asset pipeline.
export function createTranslateLoader(http: HttpClient) {
return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}
@NgModule({
imports: [
BrowserModule,
TranslateModule.forRoot({
provide: TranslateLoader,
useFactory: (createTranslateLoader),
deps: [Http]
}),
IonicModule.forRoot(MyApp)
]
})
Step 3 Create an internationalization file
Enter the following directory:
cd ionicProject/src/assets
新建一个目录为 i18n
Enter the i18n directory and create a json file
- zh-cmn-Hans.json Simplified Chinese
{
"HOME": {
"TITLE":"首页",
"CONTENT":"你好,世界!"
}
}
- zh-cmn-Hant.json Traditional Chinese
{
"HOME": {
"TITLE":"首頁",
"CONTENT":"你好,世界!"
}
}
- en.json English
{
"HOME": {
"TITLE":"Home",
"CONTENT":"Hello word!"
}
}
use
Open the file app.component.ts and add the code
import { TranslateService } from '@ngx-translate/core';
translate.setDefaultLang('en'); // 设置默认的语言包
Source code optimization in the official start demo
initTranslate() {
// 根据浏览器来判断字符集
this.translate.setDefaultLang('zh-cmn-Hans');
const browserLang = this.translate.getBrowserLang();
if (browserLang) {
if (browserLang === 'zh') {
const browserCultureLang = this.translate.getBrowserCultureLang();
if (browserCultureLang.match(/-CN|CHS|Hans/i)) {
this.translate.use('zh-cmn-Hans');
} else if (browserCultureLang.match(/-TW|CHT|Hant/i)) {
this.translate.use('zh-cmn-Hant');
}
} else {
this.translate.use(this.translate.getBrowserLang());
}
} else {
// 设置翻译
this.translate.use('zh-cmn-Hans');
}
}
html
<ion-header>
<ion-navbar>
<ion-title>{{ 'HOME.TITLE' | translate }}</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<button (click)="ChangeLanguage()" ion-button color="light">设置语言</button>
<h2>{{ 'HOME.CONTENT' | translate }}</h2>
</ion-content>
Notice:
I have been looking for this question for a long time. At first, I didn’t know how to deal with it. I read several bloggers and went to the doctor indiscriminately when I was sick. Finally, when I saw the official website, I realized that it was a version problem. It is recommended that after reporting an error, go to the official website to see if there is any explanation. . .
If you’re still using Angular v5, please use ngx-translate 9.x because
version 10 and above are only compatible with Angular v6. If you try
to use v10 with Angular v5 you will get an error message TypeError:
Object(…) is not a function
Icon: