Angular2 国际化 (i18n)

2,222 阅读3分钟

本文可供Angular5,6,7的项目参考使用

背景

  • Angular: 7
  • Angular CLI: 7.1.2
  • Node: 10.4.1

实现

本文介绍了三种实现方法,因为本人使用的是第三种,所以第一、二种(分享了链接)就不赘述了。

方法一

使用Angular cli实现,即使用Angular自带的i18n工具。

i18n 模板的翻译过程分为四个阶段

1.在组件模板中标记需要翻译的静态文本信息。

2.创建翻译文件:使用 Angular CLI 的 xi18n >命令,把标记过的文本提取到一个符合行业标准的翻译源文件中。

3.编辑所生成的翻译文件:把提取出的文本翻译成目标语言。

4.把翻译完成的文件合并回应用。要做到这一点,请使用 Angular CLI 的 build >命令来编译此应用,选择一个区域相关的配置,或指定下列命令选项。

  • --i18nFile=指向翻译文件的路径
  • --i18nFormat=此翻译文件的格式
  • --i18nLocale=地区 ID

该命令会使用翻译的文本替换原始信息,并生成新的目标语言版本的应用程序。

实现详情可查看参考链接~

方法二

使用第三方库 ngx-translate 实现,配置和使用可查看参考链接(很详细啦)。

方法三

使用第三方库 ngstack 实现

以下例子仅供Angular 6以上的项目参考,Angular 5及以下版本可查看参考链接~

1.安装

npm install @ngstack/translate

2.配置

在src/assets/i18n应用程序的文件夹中创建文件 en.json(英文版)和zh-Hans(简体中文版)。

en.json

{
  "TITLE": "Hello!"
}

zh-Hans.json

{
  "TITLE": "您好!"
}

在主应用程序模块中导入TranslateModule,APP_INITIALIZER,配置TranslateService,添加HttpClientModule模块依赖。

app.module.ts

import { NgModule, APP_INITIALIZER } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { TranslateModule } from '@ngstack/translate';

// needed to load translation before application starts
export function setupTranslateService(service: TranslateService) {
  return () => service.load();
}

@NgModule({
  imports: [
    BrowserModule,
    HttpClientModule,
    //  在启动时将浏览器语言作为活动语言
    TranslateModule.forRoot()
    
    //  使用activeLang属性自定义活动语言为英文
    //  TranslateModule.forRoot({
    //      activeLang: 'en'
    //  });
  ],
  providers: [
    // needed to load translation before application starts
    {
      provide: APP_INITIALIZER,
      useFactory: setupTranslateService,
      deps: [TranslateService],
      multi: true
    }
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {
    constructor(translate: TranslateService) {
    translate.use('en');
    translate.use('zh-Hans')
  }
}

3.使用

  • 通过管道翻译

app.component.html

<h2>
  {{ 'TITLE' | translate }}
</h2>

(若未找到json文件,会直接显示“TITLE”)

此外,还有如下几种方法

<element>{{ 'KEY' | translate }}</element>
<element [attribute]="property | translate"></element>
<element attribute="{{ property | translate }}"></element>
<element [innerHTML]="'KEY' | translate"></element>
<element>{{ 'PROPERTY.PATH' | translate }}</element>
<element>{{ 'FORMAT' | translate:params }}</element>

  • 通过服务翻译

app.component.html

<h2>
  {{ title }}
</h2>

app.component.ts

import { TranslateService } from '@ngstack/translate';
...
@Component({...})
export class AppComponent {

  title: string;

  constructor(translate: TranslateService) {

    this.title = translate.get('TITLE');

  }

}

4.切换语言

app.component.html

<h2>
  {{ 'TITLE' | translate }}
</h2>

<button type="button" (click)="changeLanguage('zh-Hans')">
    中文
</button>

<button type="button" (click)="changeLanguage('en')">
    English
</button>

app.component.ts

import { TranslateService } from '@ngstack/translate';
...
@Component({...})
export class AppComponent {

  constructor(translate: TranslateService) {}

  //  切换语言
  changeLanguage(lang: string) {  
    this.translate.activeLang = lang;
  }
}

参考链接

使用Angular cli实现:

Angular官方文档:国际化(i18n)

Angular Internationalization - Angular i18n Multi Language

Angular 项目 国际化

使用Angular-CLI发布一个i18n(国际化)应用

使用ngx-translate实现:

Angular 5.0 学习9:Angular i18n(国际化方案)

Github: ngx-translate/core

使用ngstack实现:

Github: ngstack/translate