ohayolibs/docs/i18n.zh-CN.md

Ohayo is a set of essential modules for ohayojp.

---
order: 30
title:
  en-US: I18n
  zh-CN: 国际化
type: Advance
---

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

## 两种方案

### Angular 内置

Angular [文档](https://angular.io/guide/i18n)（[中文版](https://angular.cn/guide/i18n)）有完整的描述，**注意**需要为每一种语言构建和部署单独的应用程序版本。

### @ngx-translate/core

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

## 如何配置

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

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

### Angular

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

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

### ng-zorro-antd

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

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

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

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

switchLanguage() {
  this.nzI18nService.setLocale(en_US);
}
```

### @ohayo

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

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

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

```ts
import { en_US, OhayoLocaleService } from '@ohayo/theme';
...
constructor(private ohayoLocaleService: OhayoLocaleService) {
}

switchLanguage() {
  this.ohayoLocaleService.setLocale(en_US);
}
```

## OHAYO_I18N_TOKEN

`@ohayo/*` 类库有许多带有 _i18n_ 字样的数据接口属性（例如：`page-header`、`st` 列描述、`Menu` 菜单数据等等），当你希望这些组件的数据接口能动态根据 Key 值按当前语言自动切换时，你还需要对 `OHAYO_I18N_TOKEN` 定义一个自实现服务接口（例如：[I18NService](https://github.com/ohayojp/ohayojp/blob/master/src/app/core/i18n/i18n.service.ts)），并在根模块下注册。

```ts
import { OHAYO_I18N_TOKEN } from '@ohayo/theme';
import { I18NService } from '@core';

@NgModule({
  ...
  providers: [
    { provide: OHAYO_I18N_TOKEN, useClass: I18NService, multi: false }
  ]
})
export class AppModule {}
```

### i18n管道

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

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

## 如何添加

创建脚手架[命令行](/cli/add) `ng add ohayojp` 时允许指定 `--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`、`@ohayo/*` 等类库的默认语言都不同，因此还需要确保这些类库的默认语言是**同一类型**。一个简单的示例办法可以了解各类库当前语言情况：

```ts
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>@ohayo</h2>
  <div style="width: 200px">
    <tag-select>
      <nz-tag>1</nz-tag>
    </tag-select>
  </div>`,
})
export class I18nTestComponent {
  now = new Date();
}
```

### 示例

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

#### 中文版

```ts
// #region i18n
import { default as ngLang } from '@angular/common/locales/zh';
import { NZ_I18N, zh_CN as zorroLang } from 'ng-zorro-antd/i18n';
import { OHAYO_LOCALE, zh_CN as ohayoLang } from '@ohayo/theme';
const LANG = {
  abbr: 'zh',
  ng: ngLang,
  zorro: zorroLang,
  ohayo: ohayoLang,
};
// 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: OHAYO_LOCALE, useValue: LANG.ohayo },
];
// #endregion

@NgModule({
  providers: [...LANG_PROVIDES],
})
export class AppModule {}
```

#### 英文版

```ts
// #region i18n
import { default as ngLang } from '@angular/common/locales/en';
import { NZ_I18N, en_US as zorroLang } from 'ng-zorro-antd/i18n';
import { OHAYO_LOCALE, en_US as ohayoLang } from '@ohayo/theme';
const LANG = {
  abbr: 'en',
  ng: ngLang,
  zorro: zorroLang,
  ohayo: ohayoLang,
};
// 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: OHAYO_LOCALE, useValue: LANG.ohayo },
];
// #endregion

@NgModule({
  providers: [...LANG_PROVIDES],
})
export class AppModule {}
```

### 命令行

使用 [defaultLanguage](/cli/plugin/zh#defaultLanguage) 插件可以快速切换默认语言环境。