国际化
目前的默认文案是中文,如果需要使用其他语言,可以在初始化时进行配置,也可以在运行中随时修改,可以参考下面的方案。你也可以在新建项目时通过 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';
@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';
...
constructor(private i18n: NzI18nService) { }
switchLanguage() {
this.i18n.setLocale(en_US);
}
注意:en_US
是语言包名称,以下表格也遵循同样的规则。
支持语言
语言 | 语言包名称 |
---|---|
阿拉伯 | ar_EG |
保加利亚语 | bg_BG |
加泰罗尼亚语 | ca_ES |
捷克语 | cs_CZ |
德语 | de_DE |
丹麦 | da_DK |
希腊语 | el_GR |
英语 | en_GB |
英语(美式) | en_US |
西班牙语 | es_ES |
爱沙尼亚语 | et_EE |
波斯语 | fa_IR |
芬兰语 | fi_FI |
法语(比利时) | fr_BE |
法语 | fr_FR |
冰岛语 | is_IS |
意大利语 | it_IT |
日语 | ja_JP |
韩语/朝鲜语 | ko_KR |
挪威 | nb_NO |
荷兰语(比利时) | nl_BE |
荷兰语 | nl_NL |
波兰语 | pl_PL |
葡萄牙语(巴西) | pt_BR |
葡萄牙语 | pt_PT |
斯洛伐克语 | sk_SK |
塞尔维亚 | sr_RS |
瑞典语 | sv_SE |
泰语 | 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';
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);