Ionic + Angular 实现国际化

目录

1. 安装 ngx-translate

2. 在 app.module.ts 导入 translate 组件

3. 在 app.component.ts 里设置默认语言

4. 添加语言包（语言配置文件）

4.1 zh.json -> 中文配置文件

4.2 en.json -> 英文配置文件

5. 在页面中使用国际化

5.1 air-quality.page.ts 文件中引入国际化

5.2 air-quality.page.html 文件中使用国际化

---

1. 安装 ngx-translate

npm install @ngx-translate/core@13
npm install @ngx-translate/http-loader@6

注意：Angular 版本不同，安装的 ngx-translate 版本也不同，可以去官网查看对应版本说明

GitHub - ngx-translate/core: The internationalization (i18n) library for Angularhttps://github.com/ngx-translate/core

2. 在 app.module.ts 导入 translate 组件

// 引入http接口方法
import { HttpClientModule, HttpClient } from '@angular/common/http';
import {
  TranslateLoader,
  TranslateModule,
  TranslateService,
} from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

// 翻译加载程序需要知道在哪里加载 i18n 文件
// 在 Ionic 的静态资产管道中
export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

@NgModule({
	imports: [
		HttpClientModule,
    // 多语言
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    })
	],
	providers: [
		TranslateService,
	]
})

3. 在 app.component.ts 里设置默认语言

import { TranslateService } from '@ngx-translate/core';

export class AppComponent {
	constructor(private translate: TranslateService) {
		this.initTranslate();
	}

	initTranslate(){
      /**
       * getBrowserLang() 方法获取大类,如 ‘zh’, 中文简体中文繁体统称
       */

      // 设置翻译字符串的默认语言和当前语言
      this.translate.setDefaultLang('zh');

      // 获取系统语言
      if (this.translate.getBrowserCultureLang() !== undefined) {
        this.translate.use(this.translate.getBrowserLang());
        // this.translate.use('en');
      } else {
        this.translate.use('zh');
      }
  }
}

4. 添加语言包（语言配置文件）

在 src/assets 下，新建文件夹 i18n

在 i18n 文件夹下，添加 zh.json 、en.json 这两个 .json 文件

4.1 zh.json -> 中文配置文件

{
  "airQuality": {
   "weatherData": {
     "primaryPolluteLabel": "首要污染物",
     "unit": "级",
     "dataSources": "数据来源",
     "updateTime": "更新时间"
   },
   "monitoringData": {
     "title": "实时监测",
     "unit": "单位"
   },
   "airForecastData": {
    "title": "空气预报"
   },
   "airChangeData": {
     "title": "近24小时空气变化趋势"
   },
   "siteRanking": {
     "title": "站点排名",
     "site": "站点",
     "ranking": "排名",
     "siteName": "站点名称",
     "county": "区县",
     "primaryPollu": "首污",
     "scaling": "超标比例"
   },
   "cityRankWord": {
    "1": {
      "range": "全国",
      "name": "城市"
    },
    "2": {
      "range": "全国",
      "name": "省会城市"
    },
    "3": {
      "range": "全省",
      "name": "城市"
    }
   }
  }
}

4.2 en.json -> 英文配置文件

{
  "airQuality": {
   "weatherData": {
     "primaryPolluteLabel": "Primary pollutant",
     "unit": "level",
     "dataSources": "data sources",
     "updateTime": "update time"
   },
   "monitoringData": {
     "title": "Real time monitoring",
     "unit": "unit"
   },
   "airForecastData": {
    "title": "Air forecast"
   },
   "airChangeData": {
     "title": "Air change trend in recent 24 hours"
   },
   "siteRanking": {
     "title": "Site ranking",
     "site": "site",
     "ranking": "ranking",
     "siteName": "site name",
     "county": "county",
     "primaryPollu": "first pollution",
     "scaling": "excess ratio"
   },
   "cityRankWord": {
    "1": {
      "range": "nationwide",
      "name": " cities "
    },
    "2": {
      "range": "nationwide",
      "name": " provincial capitals "
    },
    "3": {
      "range": "in The province",
      "name": " cities "
    }
   }
  }
}

5. 在页面中使用国际化

5.1 air-quality.page.ts 文件中引入国际化

import { TranslateService }from "@ngx-translate/core";

export class AirQualityPage implements OnInit {
  // 翻译文本
  public translateText: any = {};
  // 当前语言
  public currentLanguage: string = '';
  constructor(
    public translate: TranslateService
  ) {
    this.translateAction();
   }

  // 设置多语言
  translateAction() {
    this.translate.get('airQuality').subscribe((value) => {
      this.translateText = value;
      this.currentLanguage = this.translate.getBrowserLang();
      console.log('this.translateText', this.translateText);
      console.log('当前语言', this.currentLanguage);
    })
  }
}

5.2 air-quality.page.html 文件中使用国际化