ohayolibs/docs/i18n.en-US.md

Ohayo is a set of essential modules for ohayojp.

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

Angular internationalization often has two different internationalization schemes, Angular built-in and based on @ngx-translate/core (please refer to [official website](https://github.com/ngx-translate/core) for more implementation details).

## Two options

### Angular Built in

Angular [Document](https://angular.io/guide/i18n)（[Chinese Version](https://angular.cn/guide/i18n)）Have a full description, **Note** Need to build and deploy a separate application version for each language.

### @ngx-translate/core

[@ngx-translate/core](https://github.com/ngx-translate/core) is a community version of Angular Internationalization, which is dynamic compared to Angular's built-in, no need to build and deploy separate versions for different languages. And in most cases it can be presented immediately.

## How to configure

Regardless of which internationalization option you choose, the final choice is only valid for your business.

Scaffolding is composed of two important parts: `ng-zorro-antd` and `@ohayo/*`. These two libraries have their own international configuration. When internationalizing, they need to be the same for these libraries. Language configuration.

### Angular

Angular configuration is mainly for currency, date format, etc., such as Chinese version:

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

### ng-zorro-antd

`ng-zorro-antd` internationalization defaults to the Chinese version, for example the default English version:

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

Of course, you can also use runtime changes:

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

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

### @ohayo

@ohayo internationalization defaults to Chinese version, for example the default is English version:

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

Of course, you can also use runtime changes:

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

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

## OHAYO_I18N_TOKEN

`@ohayo/*` class library has many data interface properties with the _i18n_ typeface (for example: `page-header`, `st` column description, `Menu` menu data, etc.) when you want the data for these components. When the interface can dynamically switch automatically according to the Key value in the current language, you also need to define a self-implementation service interface for `OHAYO_I18N_TOKEN` (for example: [I18NService](https://github.com/ohayojp/ohayojp/blob) /master/src/app/core/i18n/i18n.service.ts)) and register under the root module.

```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 pipe

In order not to be named by the third-party pipes, the scaffolding contains a `i18n` pipe, which is equivalent to calling the `fanAIN` method of `OHAYO_I18N_TOKEN` directly.

That differs from `@ngx-translate`'s `|translate`, which listens for language changes and updates automatically. `| i18n` will not listen to language change notifications, so there will be better performance. When you explicitly re-render the Angular project after switching languages, `| i18n` will be more suitable.

## How to add

When creating scaffolding [from command line](/cli/add) `ng add ohayojp`, it is allowed to specify `--i18n` to indicate whether the internationalized sample code is included (in the `@ngx-translate/core` mode).

## How to delete

The sample code covers the following:

- `src/app/core/i18n` directory
- `app.module.ts` for `TranslateModule`
- Replace the pipe of i18n that may appear in the default layout using `| translate` or `| i18n`
- Remove `@ngx-translate/core`, `@ngx-translate/http-loader` package

## Default language

Regardless of whether internationalization is required or not, since the default languages ​​of class libraries such as `Angular`, `ng-zorro-antd`, `@ohayo/*` are different, it is also necessary to ensure that the default language of these libraries is **the same type**. A simple example approach to understand the current language situation for each type of library:

```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();
}
```

### Example

In order to make language uniformity, ohayojp provides a simple unified configuration in the `AppModule` root module.

#### Chinese Version

```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 {}
```

#### English version

```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 {}
```

### Command Line

Use the [defaultLanguage](/cli/plugin/zh#defaultLanguage) plugin to quickly switch between the default locales.