如何在Angular项目中切换NG-ZORRO日期选择器的显示语言？

NG-ZORRO的国际化支持组件级/单个组件隔离配置，你可以根据自己的场景选择以下两种方案：

方案1：组件级全局注入语言令牌（推荐） #

该方案可以让整个表单组件内的所有NG-ZORRO组件都自动适配目标语言，不需要逐个给日期选择器加配置，语言隔离性强。

• 第一步：在组件文件头部导入依赖的语言包和注入令牌

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

• 第二步：给法语表单组件添加局部 providers 配置

@Component({
  selector: 'app-french-form',
  templateUrl: './french-form.component.html',
  styleUrls: ['./french-form.component.less'],
  // 局部注入法语配置，仅对当前组件生效
  providers: [{ provide: NZ_I18N, useValue: fr_FR }]
})
export class FrenchFormComponent {
  // 原有组件逻辑不变
}

• 第三步：给英语表单组件添加对应局部 providers 配置

@Component({
  selector: 'app-english-form',
  templateUrl: './english-form.component.html',
  styleUrls: ['./english-form.component.less'],
  // 局部注入英语配置，仅对当前组件生效
  providers: [{ provide: NZ_I18N, useValue: en_US }]
})
export class EnglishFormComponent {
  // 原有组件逻辑不变
}

方案2：单个日期选择器单独绑定语言 #

如果仅需要给单个日期选择器设置语言，不需要影响组件内其他NG-ZORRO组件，可以直接用日期选择器的nzLocale输入属性配置：

• 第一步：组件内导入语言包并声明变量

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

@Component({
  selector: 'app-custom-form',
  templateUrl: './custom-form.component.html'
})
export class CustomFormComponent {
  readonly frenchLocale = fr_FR;
  readonly englishLocale = en_US;
}

• 第二步：模板中给对应日期选择器绑定属性

<!-- 法语日期选择器 -->
<nz-date-picker [nzLocale]="frenchLocale"></nz-date-picker>

<!-- 英语日期选择器 -->
<nz-date-picker [nzLocale]="englishLocale"></nz-date-picker>

注意事项 #

• 两种方案的语言配置都是隔离的，不会修改全局的NG-ZORRO国际化配置，也不会互相影响
• 日期选择器的月份、星期显示、默认格式化规则都会自动匹配所选语言包，不需要额外修改nzFormat属性，有自定义格式化需求的场景除外
• 14.x以下版本的NG-ZORRO需要确认语言包的导出路径是否和示例一致，14.x及以上版本可直接使用上述导入写法

内容的提问来源于stack exchange，提问作者AchrafBj