集成 ngx-translate

官方连接

github：

Step 1：

安装

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

Step 2：

导入TranslateModule，首先导入TranslateModule 在 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 创建国际化文件

进入下面这个目录：

cd ionicProject/src/assets新建一个目录为 i18n

进入 i18n 目录，创建json文件

• zh-cmn-Hans.json 简体中文

{  "HOME": {   "TITLE":"首页",   "CONTENT":"你好，世界！"  }}

• zh-cmn-Hant.json 繁体中文

{  "HOME": {   "TITLE":"首頁",   "CONTENT":"你好，世界！"  }}

• en.json 英文

{  "HOME": {   "TITLE":"Home",   "CONTENT":"Hello word!"  }}

使用

打开文件app.component.ts，添加代码

import { TranslateService } from '@ngx-translate/core';translate.setDefaultLang('en'); // 设置默认的语言包

官方的 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

      
         
      
       {
   { 'HOME.TITLE' | translate }}
        
     
    
       
     设置语言  
     
{
   { 'HOME.CONTENT' | translate }}
    

注意：

对于这个问题，我找了好久。最开始都不知道怎么处理了，看了好几个人的博客，病了就乱投医。最后看到官网上面的，才知道是版本问题。建议大家报错了之后，先去官网上面看看有没有说明。。。

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

图示：