• 国际化
    • 全局配置
      • NZ_DATE_CONFIG 日期全局配置
    • 运行时修改
    • 支持语言
    • 如何使用Date-fns进行日期格式化
    • Date-fns 支持语言

    国际化

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

    全局配置

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

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

    1. /** 配置 angular i18n **/
    2. import { registerLocaleData } from '@angular/common';
    3. import en from '@angular/common/locales/en';
    4. registerLocaleData(en);
    5. /** 配置 ng-zorro-antd 国际化 **/
    6. import { NZ_I18N, en_US } from 'ng-zorro-antd';
    7. @NgModule({
    8. ...
    9. imports : [ NgZorroAntdModule ],
    10. providers : [
    11. { provide: NZ_I18N, useValue: en_US }
    12. ]
    13. })
    14. export class AppModule { }

    NZ_DATE_CONFIG 日期全局配置

    默认配置如下:

    1. {
    2. /** 指定哪一天为一周的开始(null表示采用内部默认值,0表示星期日,1表示星期一,以此类推) */
    3. firstDayOfWeek: null
    4. }

    运行时修改

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

    1. import { en_US, NzI18nService } from 'ng-zorro-antd';
    2. ...
    3. constructor(private i18n: NzI18nService) { }
    4. switchLanguage() {
    5. this.i18n.setLocale(en_US);
    6. }

    注意: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的日期格式化):

    1. import { NzI18nService } from 'ng-zorro-antd';
    2. import enDateLocale from 'date-fns/locale/en';
    3. import jaDateLocale from 'date-fns/locale/ja';
    4. @NgModule({
    5. ...
    6. imports: [ NgZorroAntdModule ],
    7. providers: [
    8. // 在应用根模块中设置NZ_DATE_LOCALE的值,将激活Date-fns方式的日期格式化展示
    9. { provide: NZ_DATE_LOCALE, useValue: enDateLocale }
    10. ]
    11. })
    12. export class AppModule {
    13. constructor(private i18n: NzI18nService) { }
    14. ...
    15. switchLanguage() {
    16. this.i18n.setDateLocale(jaDateLocale); // 运行时切换语言为日语
    17. }
    18. }

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

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

    Date-fns 支持语言

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