国际化

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

如何配置

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

Angular

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

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

ng-zorro-antd

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

import { en_US, provideNzI18n } from 'ng-zorro-antd/i18n';
export const appConfig: ApplicationConfig = {
  providers: [provideNzI18n(en_US)]
};

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

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

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

@yelon

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

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

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

import { en_US, YelonLocaleService } from '@yelon/theme';
...
private readonly i18n = inject(YelonLocaleService);

switchLanguage() {
  this.yelonLocaleService.setLocale(en_US);
}

YUNZAI_I18N_TOKEN

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

import { I18NService } from '@core';

export const appConfig: ApplicationConfig = {
  providers: [
    provideYunzai({ config: yunzaiConfig, defaultLang, i18nClass: I18NService }),
  ]
};

i18n管道

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

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

如何添加

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

如何删除

示例代码涉及内容包括：

src/app/core/i18n 目录
替换掉默认布局可能出现的 I18n 的 Pipe 使用 | i18n

默认语言

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

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

示例

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

中文版

import { default as ngLang } from '@angular/common/locales/zh';
import { provideNzI18n, zh_CN as zorroLang } from 'ng-zorro-antd/i18n';
import { YELON_LOCALE, zh_CN as yelonLang } from '@yelon/theme';
import { zhCN as dateLang } from 'date-fns/locale';
import { I18NService } from '@core';

const defaultLang: YunzaiProvideLang = {
  abbr: 'zh',
  ng: ngLang,
  zorro: zorroLang,
  date: dateLang,
  yelon: yelonLang,
};

export const appConfig: ApplicationConfig = {
  providers: [
    provideYunzai({ config: yunzaiConfig, defaultLang, i18nClass: I18NService }),
  ]
};

英文版

import { default as ngLang } from '@angular/common/locales/en';
import { provideNzI18n, en_US as zorroLang } from 'ng-zorro-antd/i18n';
import { YELON_LOCALE, en_US as yelonLang } from '@yelon/theme';
import { en_US as dateLang } from 'date-fns/locale';
const LANG = {
  abbr: 'en',
  ng: ngLang,
  zorro: zorroLang,
  yelon: yelonLang,
};

const defaultLang: YunzaiProvideLang = {
  abbr: 'en',
  ng: ngLang,
  zorro: zorroLang,
  date: dateLang,
  yelon: yelonLang,
};

export const appConfig: ApplicationConfig = {
  providers: [
    provideYunzai({ config: yunzaiConfig, defaultLang, i18nClass: I18NService }),
  ]
};

命令行

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

国际化路由

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

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

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

国际化