Skip to content

Commit 2c83788

Browse files
HyperLife1119HyperLife1119
authored
fix(module:popconfirm): correctly render icon & title (#9322)
1 parent 77e0b62 commit 2c83788

4 files changed

Lines changed: 15 additions & 12 deletions

File tree

‎components/popconfirm/demo/basic.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ import { NzPopconfirmModule } from 'ng-zorro-antd/popconfirm';
1010
<a
1111
nz-popconfirm
1212
nzPopconfirmTitle="Are you sure delete this task?"
13-
nzPopconfirmPlacement="bottom"
1413
(nzOnConfirm)="confirm()"
1514
(nzOnCancel)="cancel()"
1615
>

‎components/popconfirm/doc/index.en-US.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,8 +43,8 @@ The difference with the `confirm` modal dialog is that it's more lightweight tha
4343
| `[nzOkButtonProps]` | config object of the ok button | `NzPopConfirmButtonProps` | `null` | - |
4444
| `[nzCancelButtonProps]` | config object of the cancel button | `NzPopConfirmButtonProps` | `null` | - |
4545
| `[nzCondition]` | Whether to directly emit `onConfirm` without showing Popconfirm | `boolean` | `false` | - |
46-
| `[nzIcon]` | Customize icon of confirmation | `string \| TemplateRef<void>` | - | - |
47-
| `[nzAutoFocus]` | Autofocus a button | `null \| 'ok' \| 'cancel'` | `null` | ✅ |
46+
| `[nzIcon]` | Customize icon of confirmation | `string \| TemplateRef<void> \| null` | - | - |
47+
| `[nzAutoFocus]` | Autofocus a button | `null \| 'ok' \| 'cancel'` | `null` | ✅ |
4848
| `[nzBeforeConfirm]` | The hook before the confirmation operation, decides whether to continue responding to the `nzOnConfirm` callback, supports asynchronous verification. | `(() => Observable<boolean> \| Promise<boolean> \| boolean) \| null` | `null` | - |
4949
| `(nzOnCancel)` | Callback of cancel | `EventEmitter<void>` | - | - |
5050
| `(nzOnConfirm)` | Callback of confirmation | `EventEmitter<void>` | - | - |

‎components/popconfirm/doc/index.zh-CN.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -47,8 +47,8 @@ description: 点击元素，弹出气泡式的确认框。
4747
| `[nzOkButtonProps]` | 确定按钮的配置对象 | `NzPopConfirmButtonProps` | `null` | - |
4848
| `[nzCancelButtonProps]` | 取消按钮的配置对象 | `NzPopConfirmButtonProps` | `null` | - |
4949
| `[nzCondition]` | 是否直接触发 `nzOnConfirm` 而不弹出框 | `boolean` | `false` | - |
50-
| `[nzIcon]` | 自定义弹出框的 icon | `string \| TemplateRef<void>` | - | - |
51-
| `[nzAutoFocus]` | 按钮的自动聚焦 | `null \| 'ok' \| 'cancel'` | `null` | ✅ |
50+
| `[nzIcon]` | 自定义弹出框的 icon | `string \| TemplateRef<void> \| null` | - | - |
51+
| `[nzAutoFocus]` | 按钮的自动聚焦 | `null \| 'ok' \| 'cancel'` | `null` | ✅ |
5252
| `[nzBeforeConfirm]` | 确认操作之前的钩子，决定是否继续响应 `nzOnConfirm` 回调，支持异步验证。 | `(() => Observable<boolean> \| Promise<boolean> \| boolean) \| null` | `null` | - |
5353
| `(nzOnCancel)` | 点击取消的回调 | `EventEmitter<void>` | - | - |
5454
| `(nzOnConfirm)` | 点击确认的回调 | `EventEmitter<void>` | - | - |

‎components/popconfirm/popconfirm.ts‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -187,14 +187,18 @@ export class NzPopconfirmDirective extends NzTooltipBaseDirective {
187187
<div>
188188
<div class="ant-popover-inner-content">
189189
<div class="ant-popover-message">
190-
<ng-container *nzStringTemplateOutlet="nzTitle; context: nzTitleContext">
191-
<ng-container *nzStringTemplateOutlet="nzIcon; let icon">
192-
<span class="ant-popover-message-icon">
190+
@if (nzIcon !== null) {
191+
<span class="ant-popover-message-icon">
192+
<ng-container *nzStringTemplateOutlet="nzIcon; let icon">
193193
<nz-icon [nzType]="icon || 'exclamation-circle'" nzTheme="fill" />
194-
</span>
194+
</ng-container>
195+
</span>
196+
}
197+
<div class="ant-popover-message-title">
198+
<ng-container *nzStringTemplateOutlet="nzTitle; context: nzTitleContext">
199+
{{ nzTitle }}
195200
</ng-container>
196-
<div class="ant-popover-message-title">{{ nzTitle }}</div>
197-
</ng-container>
201+
</div>
198202
</div>
199203
<div class="ant-popover-buttons">
200204
<button
@@ -250,7 +254,7 @@ export class NzPopconfirmComponent extends NzTooltipComponent {
250254

251255
nzCondition = false;
252256
nzPopconfirmShowArrow = true;
253-
nzIcon?: string | TemplateRef<void>;
257+
nzIcon?: string | TemplateRef<void> | null;
254258
nzAutoFocus: NzAutoFocusType = null;
255259
nzBeforeConfirm: (() => Observable<boolean> | Promise<boolean> | boolean) | null = null;
256260

0 commit comments

Comments
 (0)