Ionic4--多语言使用

1、在 app.module.ts 导入 translate 组件

import { TranslateModule, TranslateLoader, TranslateService } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { HttpClientModule, HttpClient } from '@angular/common/http';


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


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

})

2、在 app.component.ts 设置默认语言

import { TranslateService } from '@ngx-translate/core';
constructor(
    private translate: TranslateService,
)

/**
 * 设置默认语言
 */
initTranslate() {
    /**
     * getBrowserLang() 方法获取大类,如‘zh’,中文简体中文繁体统称
     */
    //设置翻译字符串的默认语言和当前语言
    this.translate.setDefaultLang('zh-CN');
    console.log(this.translate.getBrowserLang());
    //获取系统语言
    if (this.translate.getBrowserCultureLang() == 'zh-TW') {
      this.translate.use('zh-TW');
    } else  if (this.translate.getBrowserLang() == 'en') {
      this.translate.use('en');
    } else {
      this.translate.use('zh-CN');
    }
}

3、在多语言文件定义多语言

//json文件内部
{
    "login": {
        "button": "登录",
        "title": "登录",
        "selectSchool": "请选择学校",
        "inputUserName": "请输入用户名",
        "inputPsw": "请输入密码",
        "loading": "正在登录...",
    }
}

4、使用多语言

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

public translateText: any = {};//多语言

constructor(
    public translate: TranslateService){
    this.translateAction();
}

//设置多语言
translateAction() {
    this.translate.get('login').subscribe((value) => {
      this.translateText = value;
    });
}

//使用
<ion-title>{{this.translateText.title}}</ion-title>