- 国际化
- 全局配置
- NZ_DATE_CONFIG 日期全局配置
- 运行时修改
- 支持语言
- 如何使用 date-fns 进行日期格式化
- date-fns 支持语言
- 全局配置
国际化
目前的默认文案是中文,如果需要使用其他语言,可以在初始化时进行配置,也可以在运行中随时修改,可以参考下面的方案。你也可以在新建项目时通过 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 i18n **/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({...imports : [ NgZorroAntdModule ],providers : [{ provide: NZ_I18N, useValue: en_US }]})export class AppModule { }
NZ_DATE_CONFIG 日期全局配置
默认配置如下:
{/** 指定哪一天为一周的开始(null表示采用内部默认值,0表示星期日,1表示星期一,以此类推) */firstDayOfWeek: null}
运行时修改
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 是语言包名称,以下表格也遵循同样的规则。
支持语言
| 语言 | 语言包名 |
|---|---|
| 阿拉伯 | ar_EG |
| 保加利亚语 | bg_BG |
| 加泰罗尼亚语 | ca_ES |
| 捷克语 | cs_CZ |
| 丹麦语 | da_DK |
| 德语 | de_DE |
| 希腊语 | el_GR |
| 英语 | en_GB |
| 英语(美式) | en_US |
| 西班牙语 | es_ES |
| 爱沙尼亚语 | et_EE |
| 波斯语 | fa_IR |
| 芬兰语 | fi_FI |
| 法语(比利时) | fr_BE |
| 法语 | fr_FR |
| 希伯来语 | he_IL |
| 印地语 | hi_IN |
| 克罗地亚语 | hr_HR |
| 匈牙利 | hu_HU |
| 冰岛语 | is_IS |
| 印度尼西亚语 | id_ID |
| 意大利语 | it_IT |
| 日语 | ja_JP |
| 卡纳达语 | kn_IN |
| 韩语/朝鲜语 | ko_KR |
| 库尔德语 | ku_IQ |
| 拉脱维亚语 | lv_LV |
| 马来语 | ms_MY |
| 蒙古语 | mn_MN |
| 挪威 | nb_NO |
| 尼泊尔语 | ne_NP |
| 荷兰语(比利时) | nl_BE |
| 荷兰语 | nl_NL |
| 波兰语 | pl_PL |
| 葡萄牙语(巴西) | pt_BR |
| 葡萄牙语 | pt_PT |
| 斯洛伐克语 | sk_SK |
| 塞尔维亚 | sr_RS |
| 斯洛文尼亚 | sl_SI |
| 瑞典语 | sv_SE |
| 泰米尔语 | ta_IN |
| 泰语 | th_TH |
| 土耳其语 | tr_TR |
| 俄罗斯语 | ru_RU |
| 乌克兰语 | uk_UA |
| 越南语 | vi_VN |
| 简体中文 | zh_CN |
| 繁体中文 | zh_TW |
如何使用 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 * as enDateLocale from 'date-fns/locale/en';import * as jaDateLocale from 'date-fns/locale/ja';@NgModule({...imports: [ NgZorroAntdModule ],providers: [// 在应用根模块中设置NZ_DATE_LOCALE的值,将激活date-fns方式的日期格式化展示{ provide: NZ_DATE_LOCALE, useValue: enDateLocale }]})export class AppModule {constructor(private i18n: NzI18nService) { }...switchLanguage() {this.i18n.setDateLocale(jaDateLocale); // 运行时切换语言为日语}}
切换成功后,您也可以选择移除掉对Angular Locales包的依赖(删除下方代码)来减小打包体积(前提是你自己代码没有对他依赖):
// 以下代码可根据需要移除import { registerLocaleData } from '@angular/common';import en from '@angular/common/locales/en';registerLocaleData(en);
date-fns 支持语言
https://date-fns.org/docs/I18n#supported-languages
