国际化

Angular 国际化提供一种可被提取语言文件的方案,但对于 NG-ALAIN 而言,这并不是最好的方式;这主要受限于 @Delon/* 组件库需要提供一套带有动态翻译的服务,因此,NG-ALAIN 内置一个简易的国际化服务 ALAIN_I18N_TOKEN 接口。

如何配置

脚手架是由 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-headerst 列描述、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_TOKENfanyi 方法。

| i18n 不会监听语言变更通知所以会有更好的性能,当你明确在切换语言后会重新渲染 Angular 项目时 | i18n 会更适合。

如何添加

创建脚手架命令行 ng add ng-alain 时允许指定 --i18n 表示是否包含国际化示例代码。

如何删除

示例代码涉及内容包括:

  • src/app/core/i18n 目录

  • 替换掉默认布局可能出现的 I18n 的 Pipe 使用 | i18n

默认语言

不管是否需要国际化,由于 Angularng-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 插件可以快速切换默认语言环境。

国际化路由

若想通过路由的URL来切换国际化,例如:通过访问 /zh/en 来变更语言,则只需要在根路由中使用 AlainI18NGuard 守卫:

const routes: Route[] = [
  {
    path: '',
    component: LayoutComponent,
    canActivateChild: [AlainI18NGuard],
    children: [
      { path: '', redirectTo: 'en', pathMatch: 'full' },
      { path: ':i18n', component: HomeComponent }
    ]
  }
];

其中 :i18n 是参数固定值,可以通过全局配置 paramNameOfUrlGuard 来调整。