Angular2 国际化 (i18n)

最新推荐文章于 2024-09-18 02:32:40 发布

weixin_33675507

最新推荐文章于 2024-09-18 02:32:40 发布

阅读量756

点赞数

文章标签： javascript json ViewUI

原文链接：https://juejin.im/post/5c7c85dfe51d4537b05b0722

版权

本文可供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;
  }
}
复制代码