国际化

目前的默认文案是中文，如果需要使用其他语言，可以在初始化时进行配置，也可以在运行中随时修改，可以参考下面的方案。 你也可以在新建项目时通过 ng add ng-zorro-antd 设置国际化语言。

配置默认国际化语言#

ng-zorro-antd 提供了几个配置型 token 用于全局配置国际化文案和日期，NZ_I18N用于国际化文案，NZ_DATE_CONFIG用于修改日期相关特性，除此之外，我们默认使用 Angular 的语言包来进行日期格式化（需要引入相应的 Angular 语言包）。

另外，我们还提供了可选的 NZ_DATE_LOCALE 用于 date-fns 方式来格式化本地日期（依赖 date-fns 库，详见下方的如何使用 date-fns 进行日期格式化）。

/** 导入需要使用的 Angular 语言包 **/
import { registerLocaleData } from '@angular/common';
import en from '@angular/common/locales/en';
registerLocaleData(en);

/** 配置 ng-zorro-antd 国际化 **/
import { NZ_I18N, en_US } from 'ng-zorro-antd/i18n';

/** 静态配置 **/
@NgModule({
  providers   : [
    { provide: NZ_I18N, useValue: en_US }
  ]
})
export class AppModule { }

与 Angular 应用本地化方案联动#

当使用 Angular 应用本地化方案 时，可以根据 LOCALE_ID 自动切换 ng-zorro-antd 默认语言

/** 导入需要使用的语言包 **/
import { LOCALE_ID } from '@angular/core';
import { registerLocaleData } from '@angular/common';
import en from '@angular/common/locales/en';
import zh from '@angular/common/locales/zh';
registerLocaleData(en);
registerLocaleData(zh);

/** 配置 ng-zorro-antd 国际化 **/
import { en_US, NZ_I18N, zh_CN } from 'ng-zorro-antd/i18n';

/** 根据 LOCALE_ID 自动切换 ng-zorro-antd 语言 **/
@NgModule({
  providers   : [{
    provide: NZ_I18N,
    useFactory: (localId: string) => {
      switch (localId) {
        case 'en':
          return en_US;
        /** 与 angular.json i18n/locales 配置一致 **/
        case 'zh':
          return zh_CN;
        default:
          return en_US;
      }
    },
    deps: [LOCALE_ID]
  }]
})
export class AppModule { }

运行时修改#

ng-zorro-antd 提供了 NzI18nService 服务用于动态修改国际化文案。

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

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

注意：en_US 是语言包名称，以下表格也遵循同样的规则。

支持语言#

如何使用 date-fns 进行日期格式化#

对于日期的格式化，我们默认采用Angular的DatePipe（语法参考来实现（依赖Angular的locale语言包），但由于Angular自带的DatePipe并非按照ISO标准算法实现（issue #25380），使用时周数的展示可能与预期不符（相关issue: #2406, #2819）。

所以我们新提供了date-fns方式（语法参考）来进行标准的日期格式化，您可以通过以下方式切换至 date-fns（切换后将影响所有日期类组件如Calendar/DatePicker的日期格式化）：

import { NzI18nService } from 'ng-zorro-antd/i18n';
import { enUS, ja } from 'date-fns/locale';

@NgModule({
  ...
  providers: [
    // 在应用根模块中设置NZ_DATE_LOCALE的值，将激活date-fns方式的日期格式化展示
    { provide: NZ_DATE_LOCALE, useValue: enUS }
  ]
})
export class AppModule {
  constructor(private i18n: NzI18nService) { }

  ...

  switchLanguage() {
    this.i18n.setDateLocale(ja); // 运行时切换语言为日语
  }
}

切换成功后，您也可以选择移除掉对Angular Locales包的依赖（删除下方代码）来减小打包体积（前提是你自己代码没有对他依赖）:

// 以下代码可根据需要移除
import { registerLocaleData } from '@angular/common';
import en from '@angular/common/locales/en';
registerLocaleData(en);

NZ_DATE_CONFIG 日期全局配置#

默认配置如下：

{
  /** 指定哪一天为一周的开始（null表示采用内部默认值，0表示星期日，1表示星期一，以此类推） */
  firstDayOfWeek: null
}

date-fns 支持语言#

https://date-fns.org/docs/I18n#supported-languages

如何更改默认国际化语言包配置#

ng-zorro 中有些组件的文本依赖于国际化文本，例如 nz-pagination 中的 size changer, 这时候你可以修改国际化配置来更改 size changer 中的文本内容：

import { NZ_I18N, en_US } from 'ng-zorro-antd/i18n';

const customLanguagePack = {
  en_US,
  ...{
    Pagination: {
      items_per_page: "per page"
    }
  }
}

@NgModule({
  ...
  providers   : [
    { provide: NZ_I18N, useValue: customLanguagePack }
  ]
})
export class AppModule { }