国际化

国际化

Angular 国际化常见有 Angular 内置和基于 @ngx-translate/core （请参考官网了解更多实现细节）两种不同国际化方案。

两种方案

Angular 内置

Angular 文档（中文版）有完整的描述，注意需要为每一种语言构建和部署单独的应用程序版本。

@ngx-translate/core

@ngx-translate/core 是社区版本的 Angular 国际化，相比较 Angular 内置它是动态性，无须针对不同语言构建和部署单独版本，并且大部分情况下可以立即呈现。

如何配置

不管你选择哪一种国际化方案，最终选择的都只对你业务范围有效。

脚手架是由 ng-zorro-antd、@delon/* 类库两个重要部分组件，而这两个类库有自己的国际化配置，当进行国际化时需要对这些类库进行相同语言的配置。

Angular

Angular 配置主要是针对货币、日期格式等，例如中文版本：

import { registerLocaleData } from '@angular/common';
import zh from '@angular/common/locales/zh';
registerLocaleData(zh);

ng-zorro-antd

NG-ZORRO 国际化默认是中文版，例如默认为英文版本：

import { NZ_I18N, en_US } from 'ng-zorro-antd/i18n';
@NgModule({
  ...
  imports     : [ NgZorroAntdModule ],
  providers   : [ { provide: NZ_I18N, useValue: en_US } ]
})
export class AppModule { }

当然，也可以使用运行时更改：

import { en_US, NzI18nService } from 'ng-zorro-antd/i18n';
...
constructor(private nzI18nService:NzI18nService) {
}
switchLanguage() {
  this.nzI18nService.setLocale(en_US);
}

@delon

@delon 国际化默认是中文版，例如默认为英文版本：

import { DELON_LOCALE, en_US } from '@delon/theme';
@NgModule({
  ...
  providers   : [ { provide: DELON_LOCALE, useValue: en_US } ]
})
export class AppModule { }

当然，也可以使用运行时更改：

import { en_US, DelonLocaleService } from '@delon/theme';
...
constructor(private delonLocaleService: DelonLocaleService) {
}
switchLanguage() {
  this.delonLocaleService.setLocale(en_US);
}

ALAIN_I18N_TOKEN

@delon/* 类库有许多带有 i18n 字样的数据接口属性（例如：page-header、st 列描述、Menu 菜单数据等等），当你希望这些组件的数据接口能动态根据 Key 值按当前语言自动切换时，你还需要对 ALAIN_I18N_TOKEN 定义一个自实现服务接口（例如：I18NService），并在根模块下注册。

import { ALAIN_I18N_TOKEN } from '@delon/theme';
import { I18NService } from '@core';
@NgModule({
  ...
  providers: [
    { provide: ALAIN_I18N_TOKEN, useClass: I18NService, multi: false }
  ]
})
export class AppModule {}

i18n管道

为了不受第三方各自管道的命名方式，脚手架包含一个 i18n 的管道，它相当于直接调用 ALAIN_I18N_TOKEN 的 fanyi 方法。

他和 @ngx-translate 的 | translate 有所不同，它会监听语言的变化并自动更新。而 | i18n 不会监听语言变更通知所以会有更好的性能，当你明确在切换语言后会重新渲染 Angular 项目时 | i18n 会更适合。

如何添加

创建脚手架命令行 ng add ng-alain 时允许指定 --i18n 表示是否包含国际化示例代码（采用 @ngx-translate/core 方式）。

如何删除

示例代码涉及内容包括：

src/app/core/i18n 目录
app.module.ts 对 TranslateModule 相关声明
替换掉默认布局可能出现的 I18n 的 Pipe 使用 | translate 或 | i18n
移除 @ngx-translate/core、@ngx-translate/http-loader 包体

默认语言

不管是否需要国际化，由于 Angular、ng-zorro-antd、@delon/* 等类库的默认语言都不同，因此还需要确保这些类库的默认语言是同一类型。一个简单的示例办法可以了解各类库当前语言情况：

import { Component } from '@angular/core';
@Component({
  selector: 'app-i18n-test',
  template: `
  <h2>angular</h2>
  <p>Date: {{now | date}}</p>
  <h2>ng-zorro-antd</h2>
  <nz-transfer [nzDataSource]="[]"></nz-transfer>
  <h2>@delon</h2>
  <div style="width: 200px">
    <tag-select>
      <nz-tag>1</nz-tag>
    </tag-select>
  </div>`,
})
export class I18nTestComponent {
  now = new Date();
}

示例

为了使语言统一性，NG-ALAIN 提供一个在 AppModule 根模块里简单的统一配置方式。

中文版

// #region i18n
import { default as ngLang } from '@angular/common/locales/zh';
import { NZ_I18N, zh_CN as zorroLang } from 'ng-zorro-antd/i18n';
import { DELON_LOCALE, zh_CN as delonLang } from '@delon/theme';
const LANG = {
  abbr: 'zh',
  ng: ngLang,
  zorro: zorroLang,
  delon: delonLang,
};
// register angular
import { registerLocaleData } from '@angular/common';
registerLocaleData(LANG.ng, LANG.abbr);
const LANG_PROVIDES = [
  { provide: LOCALE_ID, useValue: LANG.abbr },
  { provide: NZ_I18N, useValue: LANG.zorro },
  { provide: DELON_LOCALE, useValue: LANG.delon },
];
// #endregion
@NgModule({
  providers: [...LANG_PROVIDES],
})
export class AppModule {}

英文版

// #region i18n
import { default as ngLang } from '@angular/common/locales/en';
import { NZ_I18N, en_US as zorroLang } from 'ng-zorro-antd/i18n';
import { DELON_LOCALE, en_US as delonLang } from '@delon/theme';
const LANG = {
  abbr: 'en',
  ng: ngLang,
  zorro: zorroLang,
  delon: delonLang,
};
// register angular
import { registerLocaleData } from '@angular/common';
registerLocaleData(LANG.ng, LANG.abbr);
const LANG_PROVIDES = [
  { provide: LOCALE_ID, useValue: LANG.abbr },
  { provide: NZ_I18N, useValue: LANG.zorro },
  { provide: DELON_LOCALE, useValue: LANG.delon },
];
// #endregion
@NgModule({
  providers: [...LANG_PROVIDES],
})
export class AppModule {}

命令行

使用 defaultLanguage 插件可以快速切换默认语言环境。