UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载本文基于 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-USSetokTextandcancelTextprops to customise the buttons labels.对应的完整实现见 locale.tsimport { 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 nzPopconfirmTitleAre you sure? nzOkTextok nzCancelTextcancel (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); } }几个值得注意的要点独立模块引入只需导入NzPopconfirmModule即可使用nz-popconfirm指令无需额外引入 Tooltip 等模块。属性命名指令上同时存在nzOkText确认按钮文字与nzCancelText取消按钮文字可单独设置其中一个未设置的一侧仍走默认文案。事件回调点击确认触发(nzOnConfirm)点击取消触发(nzOnCancel)示例中用NzMessageService弹出info提示演示反馈。属性名也可写作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.tsexport interface NzPopConfirmButton { nzType: NzButtonType; // 按钮类型如 primary | ghost | dashed | default nzDanger: boolean; // 是否为危险按钮 nzDisabled: boolean; // 是否禁用按钮 } export type NzPopConfirmButtonProps PartialNzPopConfirmButton;对应输入属性在 popconfirm.ts 中定义nzOkButtonProps inputnull | NzPopConfirmButtonProps(null); nzCancelButtonProps inputnull | 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 nzPopconfirmTitleAre you sure to delete this task? nzOkTextYes, delete nzCancelTextNo, 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支持Observableboolean | Promiseboolean | boolean返回false则不触发nzOnConfirm源码见 popconfirm.ts。五、使用注意事项宿主元素事件支持请确保[nz-popconfirm]所在元素能接受onMouseEnter、onMouseLeave、onFocus、onClick事件如a、button等否则交互可能失效见 index.zh-CN.md「注意」小节。默认触发方式为 clicknzPopconfirmTrigger默认click也可改为hover/focus设为null时不响应光标事件。滚动容器问题默认浮层以body为滚动容器若页面使用自定义滚动容器导致浮层不跟随滚动需要在容器元素上添加CdkScrollable指令从angular/cdk/scrolling导入。更多属性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组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载相关推荐Ant Design Popconfirm 气泡确认框按钮文字定制okText 与 cancelText 国际化实战指南Ant Design Popconfirm 气泡确认框按钮文字定制okText 与 cancelText 国际化实战指南 气泡确认框Popconfirm常前端UI组件设计系统Ant Design Modal 国际化实战使用 okText 与 cancelText 自定义对话框按钮文字Ant Design Modal 国际化实战使用 okText 与 cancelText 自定义对话框按钮文字 本篇技术指南聚焦 Ant Design 组件库UI组件前端设计系统Ant Design Modal 按钮文案自定义与国际化okText / cancelText 全面指南Ant Design Modal 按钮文案自定义与国际化okText / cancelText 全面指南 Modal 是 Ant Design 中最常用的反馈前端UI组件设计系统创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 ng-zorro-antd Popconfirm 国际化实战：用 okText / cancelText 自定义确认框按钮文字
UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载本文基于 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-USSetokTextandcancelTextprops to customise the buttons labels.对应的完整实现见 locale.tsimport { 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 nzPopconfirmTitleAre you sure? nzOkTextok nzCancelTextcancel (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); } }几个值得注意的要点独立模块引入只需导入NzPopconfirmModule即可使用nz-popconfirm指令无需额外引入 Tooltip 等模块。属性命名指令上同时存在nzOkText确认按钮文字与nzCancelText取消按钮文字可单独设置其中一个未设置的一侧仍走默认文案。事件回调点击确认触发(nzOnConfirm)点击取消触发(nzOnCancel)示例中用NzMessageService弹出info提示演示反馈。属性名也可写作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.tsexport interface NzPopConfirmButton { nzType: NzButtonType; // 按钮类型如 primary | ghost | dashed | default nzDanger: boolean; // 是否为危险按钮 nzDisabled: boolean; // 是否禁用按钮 } export type NzPopConfirmButtonProps PartialNzPopConfirmButton;对应输入属性在 popconfirm.ts 中定义nzOkButtonProps inputnull | NzPopConfirmButtonProps(null); nzCancelButtonProps inputnull | 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 nzPopconfirmTitleAre you sure to delete this task? nzOkTextYes, delete nzCancelTextNo, 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支持Observableboolean | Promiseboolean | boolean返回false则不触发nzOnConfirm源码见 popconfirm.ts。五、使用注意事项宿主元素事件支持请确保[nz-popconfirm]所在元素能接受onMouseEnter、onMouseLeave、onFocus、onClick事件如a、button等否则交互可能失效见 index.zh-CN.md「注意」小节。默认触发方式为 clicknzPopconfirmTrigger默认click也可改为hover/focus设为null时不响应光标事件。滚动容器问题默认浮层以body为滚动容器若页面使用自定义滚动容器导致浮层不跟随滚动需要在容器元素上添加CdkScrollable指令从angular/cdk/scrolling导入。更多属性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组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载相关推荐Ant Design Popconfirm 气泡确认框按钮文字定制okText 与 cancelText 国际化实战指南Ant Design Popconfirm 气泡确认框按钮文字定制okText 与 cancelText 国际化实战指南 气泡确认框Popconfirm常前端UI组件设计系统Ant Design Modal 国际化实战使用 okText 与 cancelText 自定义对话框按钮文字Ant Design Modal 国际化实战使用 okText 与 cancelText 自定义对话框按钮文字 本篇技术指南聚焦 Ant Design 组件库UI组件前端设计系统Ant Design Modal 按钮文案自定义与国际化okText / cancelText 全面指南Ant Design Modal 按钮文案自定义与国际化okText / cancelText 全面指南 Modal 是 Ant Design 中最常用的反馈前端UI组件设计系统创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考