ng-zorro-antd Popconfirm 国际化实战：用 okText / cancelText 自定义确认框按钮文字

• UI组件
• 前端

本文基于 ng-zorro-antd 官方 Locale（国际化）示例，讲解气泡确认框 Popconfirm 如何通过nzOkText与nzCancelText自定义"确认 / 取消"按钮的文字，并结合源码剖析其与全局国际化语言包（i18n）的回退关系，以及 v20 起推荐的nzOkButtonProps/nzCancelButtonProps新 API。读完你可以在项目里快速实现多语言按钮文案、覆盖默认文案，并把按钮交互事件（nzOnConfirm/nzOnCancel）接入业务逻辑。

一、官方 Locale 示例：一键自定义按钮文字

Popconfirm 的国际化核心非常简单：在[nz-popconfirm]指令上直接设置nzOkText和nzCancelText两个输入属性，即可覆盖确认框两个按钮的显示文字。官方示例 locale.md 的说明即为此意：

• zh-CN：使用okText和cancelText自定义按钮文字。
• en-US：SetokTextandcancelTextprops to customise the button's labels.

对应的完整实现见 locale.ts：

import { Component, inject } from '@angular/core'; import { NzMessageService } from 'ng-zorro-antd/message'; import { NzPopconfirmModule } from 'ng-zorro-antd/popconfirm'; @Component({ selector: 'nz-demo-popconfirm-locale', imports: [NzPopconfirmModule], template: ` <a nz-popconfirm nzPopconfirmTitle="Are you sure?" nzOkText="ok" nzCancelText="cancel" (nzOnConfirm)="confirm()" (nzOnCancel)="cancel()" > delete </a> ` }) export class NzDemoPopconfirmLocaleComponent { private readonly nzMessageService = inject(NzMessageService); cancel(): void { this.nzMessageService.info('click cancel'); } confirm(): void { this.nzMessageService.info('click confirm'); } }

几个值得注意的要点：

1. 独立模块引入：只需导入NzPopconfirmModule即可使用nz-popconfirm指令，无需额外引入 Tooltip 等模块。
2. 属性命名：指令上同时存在nzOkText（确认按钮文字）与nzCancelText（取消按钮文字），可单独设置其中一个，未设置的一侧仍走默认文案。
3. 事件回调：点击确认触发(nzOnConfirm)，点击取消触发(nzOnCancel)；示例中用NzMessageService弹出info提示演示反馈。
4. 属性名也可写作okText/cancelText：文档正文以okText/cancelText描述，实际 Angular 模板中对应前缀为nz的完整属性名。

二、源码级剖析：按钮文字的回退机制

从源码看，Popconfirm 的按钮文字并不是写死的，而是「显式传入优先，否则回退到全局国际化语言包」。在 popconfirm.ts 的气泡模板中：

@let cancelText = nzCancelText() || ('Modal.cancelText' | nzI18n); {{ cancelText }} @let okText = nzOkText() || ('Modal.okText' | nzI18n); {{ okText }}

也就是说：

• 当nzOkText/nzCancelText未设置（为null）时，按钮文字取自 i18n 管道读取的Modal.okText/Modal.cancelText；
• 语言包中 Popconfirm 与 Modal 共用同一组文案键，见 nz-i18n.interface.ts 中NzModalI18nInterface定义的okText/cancelText字段。

默认文案来自哪个语言包

当前仓库默认中文语言包 zh_CN.ts 中定义：

Modal: { okText: '确定', cancelText: '取消', ... }

因此未做任何设置时，Popconfirm 两个按钮默认显示"确定 / 取消"，这也与 index.zh-CN.md API 表中nzCancelText（默认'取消'）、nzOkText（默认'确定'）的说明一致。

如何配合全局 i18n 做多语言

由于按钮文字最终回退到Modal.okText / cancelText，你可以通过 ng-zorro-antd 的全局国际化机制（NZ_I18N注入、NzI18nService.setLocale()切换语言，或自定义语言对象）统一影响所有 Popconfirm 的默认文案。仓库 i18n/languages 目录下提供了 60+ 语言包（如ar_EG、az_AZ、bg_BG、bn_BD、by_BY等均包含okText/cancelText键），切换语言后未显式设置的按钮文字会自动跟随。具体接入方式可参考 docs/i18n.zh-CN.md。

三、v20 起的新推荐写法：nzOkButtonProps / nzCancelButtonProps

需要特别留意的是，官方文档 index.zh-CN.md 已明确标注：

[nzCancelText]、[nzOkText]、[nzOkType]、[nzOkDanger]、[nzOkDisabled]已弃用（deprecated），请分别使用nzCancelButtonProps、nzOkButtonProps代替。

从 v20.0.0 起，Popconfirm 提供按钮级配置对象（见 popconfirm-option.ts）：

export interface NzPopConfirmButton { nzType: NzButtonType; // 按钮类型，如 'primary' | 'ghost' | 'dashed' | 'default' nzDanger: boolean; // 是否为危险按钮 nzDisabled: boolean; // 是否禁用按钮 } export type NzPopConfirmButtonProps = Partial<NzPopConfirmButton>;

对应输入属性在 popconfirm.ts 中定义：

nzOkButtonProps = input<null | NzPopConfirmButtonProps>(null); nzCancelButtonProps = input<null | NzPopConfirmButtonProps>(null);

新写法示意：

<a nz-popconfirm nzPopconfirmTitle="确认删除这条记录吗？" [nzOkButtonProps]="{ nzType: 'primary', nzDanger: true }" [nzCancelButtonProps]="{ nzType: 'default' }" (nzOnConfirm)="confirm()" (nzOnCancel)="cancel()" > 删除 </a>

源码中还会对两个按钮的 props 做一次合并计算（popconfirm.ts）：确认按钮会综合nzOkButtonProps、已弃用的nzOkType/nzOkDanger/nzOkDisabled以及nzType === 'danger'推导出最终的nzType/nzDanger/nzDisabled；取消按钮则直接透传nzCancelButtonProps。

四、完整可运行示例与业务接入

将第一节的示例稍作扩展，即可得到一个「自定义文案 + 回调反馈 + 危险确认」的完整场景：

import { Component, inject } from '@angular/core'; import { NzMessageService } from 'ng-zorro-antd/message'; import { NzPopconfirmModule } from 'ng-zorro-antd/popconfirm'; @Component({ selector: 'nz-demo-popconfirm-locale', imports: [NzPopconfirmModule], template: ` <a nz-popconfirm nzPopconfirmTitle="Are you sure to delete this task?" nzOkText="Yes, delete" nzCancelText="No, keep it" [nzOkButtonProps]="{ nzType: 'primary', nzDanger: true }" (nzOnConfirm)="confirm()" (nzOnCancel)="cancel()" > Delete </a> ` }) export class NzDemoPopconfirmLocaleComponent { private readonly nzMessageService = inject(NzMessageService); cancel(): void { this.nzMessageService.info('click cancel'); } confirm(): void { this.nzMessageService.info('click confirm'); } }

接入业务时的常见组合：nzPopconfirmTitle负责提示语、nzOkText/nzCancelText（或新 API 按钮 props）负责按钮文案、nzOnConfirm/nzOnCancel负责业务回调；若需在确认前做异步校验，可再搭配nzBeforeConfirm（支持Observable<boolean> | Promise<boolean> | boolean，返回false则不触发nzOnConfirm，源码见 popconfirm.ts）。

五、使用注意事项

1. 宿主元素事件支持：请确保[nz-popconfirm]所在元素能接受onMouseEnter、onMouseLeave、onFocus、onClick事件（如a、button等），否则交互可能失效（见 index.zh-CN.md「注意」小节）。
2. 默认触发方式为 click：nzPopconfirmTrigger默认'click'，也可改为'hover'/'focus'，设为null时不响应光标事件。
3. 滚动容器问题：默认浮层以body为滚动容器，若页面使用自定义滚动容器导致浮层不跟随滚动，需要在容器元素上添加CdkScrollable指令（从@angular/cdk/scrolling导入）。
4. 更多属性：Popconfirm 继承自 Tooltip 体系（如nzPopconfirmPlacement、nzPopconfirmMouseEnterDelay、nzPopconfirmShowArrow、nzPopconfirmBackdrop等），完整 API 参见 index.zh-CN.md，更多底层属性可参考 tooltip 组件。

总结

Popconfirm 的国际化并非独立机制，而是与全局 i18n 语言包深度绑定：nzOkText/nzCancelText提供局部覆盖能力，未设置时回退到Modal.okText/Modal.cancelText对应的当前语言文案（中文默认"确定 / 取消"）。无论是做多语言站点，还是仅需为单个气泡确认框定制按钮文字，都可以用这套 API 快速实现；同时建议新代码优先采用 v20 引入的nzOkButtonProps/nzCancelButtonProps对象式配置，以保持与官方演进方向一致。

• UI组件
• 前端