Ionic i18n国际化解决方案（ngx-translate）

 i18n，即“国际化”，是指根据App使用环境不同，调用不同的语言包在页面展示。可以是用户设置语言，也可以是跟随系统语言。

下面，我们在Ionic中加入i18n国际化，请准备好你的项目了！

 

1. 核心内容

使用Angular7的国际化(i18n)库：ngx-translate

官网地址：http://www.ngx-translate.com/

GitHub地址：https://github.com/ngx-translate/core

ngx-translate官网

 

ngx-translate GitHub仓库

官网和GitHub都有详细的使用说明，也有demo可供参考。下面大体介绍一下使用办法。

 

2. 安装ngx-translate

npm install  @ngx-translate/core --save

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

3. Import到应用的NgModule 

(1)     打开项目的app.module.ts文件，导入以下内容：

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

import { TranslateHttpLoader }from '@ngx-translate/http-loader';

import { HttpClientModule, HttpClient }from '@angular/common/http';

引入位置

(2)     在NgModule中导入以下内容：

HttpClientModule,

TranslateModule.forRoot({

    loader:{

    provide: TranslateLoader,

    useFactory:HttpLoaderFactory,

    deps: [HttpClient]

    }

})

添加代码的位置

(3)     别忘了在providers里面加上TranslateService

TranslateService

添加代码的位置

(4)     第3步里面，细心的人会发现有个HttpLoaderFactory，这个就是我们要添加的用来读取i18n中的语言json文件的TranslateLoader函数，代码如下：

//翻译加载程序需要知道在哪里加载i18n文件

//在Ionic的静态资产管道中

export function HttpLoaderFactory(http: HttpClient) {

    return new TranslateHttpLoader(http, './assets/i18n/' ,'.json');

}

添加代码的位置

(5)     app.module.ts文件里面，要添加的内容就是这些。下面继续。

 

4. 设置默认语言

打开app.component.ts文件，这是我项目的第一个component，我把设置默认语言的代码加在这里：

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

 添加代码的位置 

在构造函数中：

代码里面设置语言，就是各语言对应的json文件，zh我存放的是简体中文，en则是英文，下面会描述。

private translate: TranslateService,

this.initTranslate();

initTranslate(){

    //设置翻译字符串的默认语言和当前语言

        this.translate.setDefaultLang('zh');

        if (this.translate.getBrowserLang() !==undefined){

            this.translate.use(this.translate.getBrowserLang());

        }else {

            this.translate.use('zh');

        }

}

添加代码的位置

5. i18n各语言文件

将语言文件放到项目目录，src/assets/i18n下，或者新建.json文件，比如：

添加文件的位置

这样就和上面TranslateLoader加载的路径是一致的。具体每个jons文件，就是系统中所用的各种语言文字了，比如：

json文件 代码格式示例

 

6. 怎么读取json文件的具体内容?

(1)     在html模板中，读取方法是：{{'TAB1_TITLE' | translate }}，其中LOGIN_TITLE就是keyname，通过translate pipe翻译成对应的value。

{{'TAB1_TITLE' | translate }}

代码的位置

// 使用管道来翻译输入信息
<span>{{ 'welcome '| translate}}</span>

// 使用指令来翻译指定信息
<span [translate]="'welcome'">welcome</span>

// 使用服务翻译指定信息
this.translate.get('welcome').subscribe((res: string) => {
            console.log(res);
            this.welcomeTranslate = res;
        });



// 翻译管道中带参数
<span>{{getName | translate: {name:"crk"} }}</span>
 
//翻译指令带参数
<span
  [translate]="getName"
  [translateParams]="{'name':'ggg'}">
getName
</span>

// 翻译服务带参数
this.translate.get('getName',this.param).subscribe((res: string) => {
            console.log(res);
            this.getNameTranslate = res;
        });

 

(2)     在page.ts文件中，首先需要导入：

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

添加代码的位置

通过TranslateService的observable得到的值，就是翻译后的value。其中’TAB1_TITLE’就是json文件里面的key name

constructor(public translateService: TranslateService){

    this.translateService.get('TAB1_TITLE').subscribe((value) => {

        this.table1_text = value;

    })

}

添加代码的位置

(3)     关于ts文件中使用TranslateService，一定要注意区分懒加载的page，这一点单独在第7条中说明。

 

7. 关于懒加载的Page

如果你的page是懒加载的，一定不要忘了在对应的page.module.ts文件中，import TranslateModule，比如上面的module.ts：

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

TranslateModule

添加代码的位置

如果你的page不是懒加载的，则直接忽略本条内容。