Angular 5.x 国际化解决方案 - ngx-translate的使用

Angular 5.x 国际化解决方案 - ngx-translate的使用

下面示例代码都是基于ionic3.x UI框架中的组件编写的，直接进入正题

ngx-translate库的安装

  先放上ngx-translate官网及其github地址，在项目中，我们主要用到@ngx-translate/core和 @ngx-translate/http-loader两个模块，core模块是该库的核心模块，http-loader则是一个通过http调用翻译文件的加载器模块。如图示：

  安装模块包

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

  注意本文在编写的时候使用的是Angular 5框架，如果您使用的是Angular 4框架，请使用@ngx-translate/[email protected]的兼容版本，请执行以下命令。如果您当前使用的更低版本的Angular 2框架，请参考这篇注解 -点击链接跳转。

npm install @ngx-translate/core@^7.2.2 --save

  下图所示，是基于ionic3.9版本的配置信息，本文以此为准

ngx-translate库的使用

1.导入模块

// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { IonicApp } from 'ionic-angular';

// 使用TranslateHttpLoader加载项目的本地语言json配置文件
function createTranslateLoader(http: HttpClient) {
    return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

@NgModule({
    imports: [
        BrowserModule,
        // 调用forRoot静态方法指定加载的文件
        TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: (createTranslateLoader),
                deps: [ HttpClient ]
            }
        }),
    ],
    bootstrap: [IonicApp],
})
export class AppModule { }

2.初始化配置

// app.module.ts
import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { TranslateService } from "@ngx-translate/core";

@Component({
    templateUrl: 'app.html'
})
export class MyApp {

    private lang: string = "zh";

    constructor(private platform: Platform, private translate: TranslateService) {
        platform.ready().then( async () => {
            // 初始化配置
            this.initTranslateConfig();
        });
    }

    initTranslateConfig() {
        // 参数类型为数组，数组元素为本地语言json配置文件名
        this.translate.addLangs(["zh", "en"]);
        // 设置默认语言
        this.translate.setDefaultLang(this.lang);
        // 检索指定的翻译语言，返回Observable
        this.translate.use(this.lang)
            .subscribe(() => {
                // ... do something
            })
    }
}

3.在html模板中调用

// zh.json
{
    "loginPage": {
        "title": "登录",
        "placeholder": {
            "account": "邮箱/账号",
            "password": "密码"
        }，
        "login": "登录{{platform}}平台",
        "forget": "忘记密码",
        "register": "注册账号",
        "agreement": "点击查看www.xxxx.com\" class=\"gray-color\">用户协议",
        "thirdParty": "使用{{thirdParty}}登录"

    }
}

<ion-header>
    <ion-navbar>
        
        <ion-title>{{ 'loginPage.title' | translate }}ion-title>
    ion-navbar>
ion-header>

<ion-content padding-horizontal>

    <ion-list>
        <ion-item>
            <ion-label class="icon icon-user">ion-label>
            
            <ion-input type="text" [placeholder]=" 'loginPage.placeholder.account' | translate ">ion-input>
        ion-item>

        <ion-item>
            <ion-label class="icon icon-lock">ion-label>
            
            <ion-input type="password" [placeholder]=" 'loginPage.placeholder.password' | translate ">ion-input>
        ion-item>
    ion-list>

    
    <button ion-button full round (click)="login()">
        
        {{ 'loginPage.login' | translate: { platform: 'QQ' } }}
    button>

    
    <div [innerHTML]=" 'loginPage.agreement' | translate ">div>

    
    <ul>
        
        <li [translate]="'loginPage.thirdParty'" [translateParams]="{ thirdParty: '微信' }">li>
        <li translate [translateParams]="{ thirdParty: '微博' }">loginPage.thirdPartyli>
    ul>
ion-content>

4.在TypeScript中使用
  TranslateService提供了一系列的方法，这里讲下get和instant两个方法。get方法有两个参数，第一个参数是键，必填，字符串或字符串数组类型，第二个参数是插入字符串中的值，可选，对象类型。返回类型为Observable，注意，如果第一个参数传递的是数组，返回的数据是以数组元素为键的对象。

// login.ts
import { Component } from '@angular/core';
import { IonicPage, NavController } from 'ionic-angular';

@IonicPage()
@Component({
    selector: 'page-login',
    templateUrl: 'login.html'
})

export class LoginPage {

    constructor(public navCtrl: NavController) { }

    ionViewDidLoad() {
        this.translate.get(["loginPage.title", "loginPage.placeholder"])
            .subscribe(res => {
                // ... do something
            })
    }
}

返回结果：

  instant方法的参数和返回类型与get方法一致，与get方法不同的是该方法是同步的，当lang改变时，是无法即时更新的。大多数时候，instant方法可以满足我们的使用需求，可是在页面缓存的情况下，比如动态的标签栏，无法动态刷新。解决办法如下：

// zh.json
{
    "tabsPage": {
        "home": "首页",
        "info": "资讯",
        "serve": "服务",
        "shoppingCart": "购物车",
        "mine": "我的"
    }
}

// tabs.ts
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { TranslateService } from "@ngx-translate/core";

@IonicPage()
@Component({
    selector: 'page-tabs',
    templateUrl: 'tabs.html'
})
export class TabsPage {
    index: number = 0;

    tabs: Array = [

        { name: 'home', root: 'HomePage', title: this.translate.instant("tabsPage.home") },
        { name: 'info', root: 'InfoPage', title: this.translate.instant("tabsPage.info") },
        { name: 'serve', root: 'ServePage', title: this.translate.instant("tabsPage.serve") },
        { name: 'shoppingCart', root: 'ShoppingCartPage', title: this.translate.instant("tabsPage.shoppingCart") },
        { name: 'mine', root: 'MinePage', title: this.translate.instant("tabsPage.mine") }
    ];

    constructor(public navCtrl: NavController, public navParams: NavParams, private translate: TranslateService) { }

    ionViewDidLoad() {
        this.listenLangChange();
    }

    // 当切换本地语言的时候，tabs标签栏各项子标题需手动切换
    listenLangChange() {
        this.translate.onLangChange
            .subscribe(() => {
                // 写法一
                for(let tab of this.tabs) {
                    tab.title = this.translate.instant(`tabsPage.${tab.name}`);
                }
                // 写法二
                let titles = this.translate.instant("tabsPage");
                for(let tab of this.tabs) {
                    tab.title = titles[ tab.name ];
                }
            });
    }

}

更新于2018.03.29，未完待续…

---