Skip to content

Commit df3ead9

Browse files
tossptossp
authored
feat(module:popover): add nzPopoverTitleContext and nzPopoverContentContext (#9126)
1 parent b342bb4 commit df3ead9

4 files changed

Lines changed: 43 additions & 4 deletions

File tree

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,9 @@ Comparing with `Tooltip`, besides information `Popover` card can also provide ac
2222
| ------------------------------- | ---------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
2323
| `[nzPopoverArrowPointAtCenter]` | Arrow point at center of the origin | `boolean` | `false` |
2424
| `[nzPopoverTitle]` | Title of the popover | `string \| TemplateRef<void>` | - |
25+
| `[nzPopoverTitleContext]` | The context of Title | `object` | - |
2526
| `[nzPopoverContent]` | Content of the popover | `string \| TemplateRef<void>` | - |
27+
| `[nzPopoverContentContext]` | The context of Content | `object` | - |
2628
| `[nzPopoverTrigger]` | Popover trigger mode. If set to `null` it would not be triggered | `'click' \| 'focus' \| 'hover' \| null` | `'hover'` |
2729
| `[nzPopoverPlacement]` | The position of the popover relative to the target | `'top' \| 'left' \| 'right' \| 'bottom' \| 'topLeft' \| 'topRight' \| 'bottomLeft' \| 'bottomRight' \| 'leftTop' \| 'leftBottom' \| 'rightTop' \| 'rightBottom' \| Array<string>` | `'top'` |
2830
| `[nzPopoverOrigin]` | Origin of the tooltip | `ElementRef` | - |

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,9 @@ description: 点击/鼠标移入元素，弹出气泡式的卡片浮层。
2323
| ------------------------------- | ----------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- |
2424
| `[nzPopoverArrowPointAtCenter]` | 箭头指向锚点的中心 | `boolean` | `false` |
2525
| `[nzPopoverTitle]` | 标题 | `string \| TemplateRef<void>` | - |
26+
| `[nzPopoverTitleContext]` | 标题的上下文 | `object` | - |
2627
| `[nzPopoverContent]` | 用于定义内容 | `string \| TemplateRef<void>` | - |
28+
| `[nzPopoverContentContext]` | 内容的上下文 | `object` | - |
2729
| `[nzPopoverTrigger]` | 触发行为，为 `null` 时不响应光标事件 | `'click' \| 'focus' \| 'hover' \| null` | `'hover'` |
2830
| `[nzPopoverPlacement]` | 气泡框位置 | `'top' \| 'left' \| 'right' \| 'bottom' \| 'topLeft' \| 'topRight' \| 'bottomLeft' \| 'bottomRight' \| 'leftTop' \| 'leftBottom' \| 'rightTop' \| 'rightBottom' \| Array<string>` | `'top'` |
2931
| `[nzPopoverOrigin]` | 气泡框定位元素 | `ElementRef` | - |

‎components/popover/popover.spec.ts‎

Lines changed: 27 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -144,6 +144,17 @@ describe('NzPopover', () => {
144144

145145
expect(overlayContainerElement.querySelector('.testClass1.testClass2')).not.toBeNull();
146146
}));
147+
148+
it('should support context', fakeAsync(() => {
149+
const triggerElement = component.contextPopover.nativeElement;
150+
151+
expect(getTitleTextContent()).toBeNull();
152+
expect(getInnerTextContent()).toBeNull();
153+
dispatchMouseEvent(triggerElement, 'mouseenter');
154+
waitingForTooltipToggling();
155+
expect(getTitleTextContent()).toContain('titleContextTest');
156+
expect(getInnerTextContent()).toContain('contentContextTest');
157+
}));
147158
});
148159

149160
@Component({
@@ -178,12 +189,23 @@ describe('NzPopover', () => {
178189
[nzPopoverBackdrop]="true"
179190
[nzPopoverOverlayClickable]="false"
180191
>
181-
Click
182192
</a>
183193
184194
<ng-template #templateTitle>title-template</ng-template>
185195
186196
<ng-template #templateContent>content-template</ng-template>
197+
198+
<a
199+
#contextPopover
200+
nz-popover
201+
[nzPopoverTitle]="templateTitleContext"
202+
[nzPopoverContent]="templateContentContext"
203+
[nzPopoverTitleContext]="'titleContextTest'"
204+
[nzPopoverContentContext]="'contentContextTest'"
205+
>
206+
</a>
207+
<ng-template #templateTitleContext let-item>{{ item }}</ng-template>
208+
<ng-template #templateContentContext let-item>{{ item }}</ng-template>
187209
`
188210
})
189211
export class NzPopoverTestComponent {
@@ -205,6 +227,10 @@ export class NzPopoverTestComponent {
205227

206228
@ViewChild('backdropPopover', { static: true }) backdropPopover!: ElementRef;
207229

230+
@ViewChild('contextPopover', { static: false }) contextPopover!: ElementRef;
231+
@ViewChild('contextPopover', { static: false, read: NzPopoverDirective })
232+
contextPopoverNzPopoverDirective!: NzPopoverDirective;
233+
208234
content = 'content';
209235
visible = false;
210236
class = 'testClass';

‎components/popover/popover.ts‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ import { NzConfigKey, WithConfig } from 'ng-zorro-antd/core/config';
2121
import { NzNoAnimationDirective } from 'ng-zorro-antd/core/no-animation';
2222
import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
2323
import { NzOverlayModule } from 'ng-zorro-antd/core/overlay';
24-
import { NgStyleInterface, NzTSType } from 'ng-zorro-antd/core/types';
24+
import { NgStyleInterface, NzSafeAny, NzTSType } from 'ng-zorro-antd/core/types';
2525
import {
2626
NzToolTipComponent,
2727
NzTooltipBaseDirective,
@@ -45,7 +45,9 @@ export class NzPopoverDirective extends NzTooltipBaseDirective {
4545
/* eslint-disable @angular-eslint/no-input-rename, @angular-eslint/no-output-rename */
4646
@Input({ alias: 'nzPopoverArrowPointAtCenter', transform: booleanAttribute }) override arrowPointAtCenter?: boolean;
4747
@Input('nzPopoverTitle') override title?: NzTSType;
48+
@Input('nzPopoverTitleContext') titleContext?: NzSafeAny | null = null;
4849
@Input('nzPopoverContent') override content?: NzTSType;
50+
@Input('nzPopoverContentContext') contentContext?: NzSafeAny | null = null;
4951
@Input('nz-popover') override directiveTitle?: NzTSType | null;
5052
@Input('nzPopoverTrigger') override trigger?: NzTooltipTrigger = 'hover';
5153
@Input('nzPopoverPlacement') override placement?: string | string[] = 'top';
@@ -66,6 +68,8 @@ export class NzPopoverDirective extends NzTooltipBaseDirective {
6668
protected override getProxyPropertyMap(): PropertyMapping {
6769
return {
6870
nzPopoverBackdrop: ['nzBackdrop', () => this.nzPopoverBackdrop],
71+
titleContext: ['nzTitleContext', () => this.titleContext],
72+
contentContext: ['nzContentContext', () => this.contentContext],
6973
...super.getProxyPropertyMap()
7074
};
7175
}
@@ -114,11 +118,15 @@ export class NzPopoverDirective extends NzTooltipBaseDirective {
114118
<div>
115119
@if (nzTitle) {
116120
<div class="ant-popover-title">
117-
<ng-container *nzStringTemplateOutlet="nzTitle">{{ nzTitle }}</ng-container>
121+
<ng-container *nzStringTemplateOutlet="nzTitle; context: { $implicit: nzTitleContext }">
122+
{{ nzTitle }}
123+
</ng-container>
118124
</div>
119125
}
120126
<div class="ant-popover-inner-content">
121-
<ng-container *nzStringTemplateOutlet="nzContent">{{ nzContent }}</ng-container>
127+
<ng-container *nzStringTemplateOutlet="nzContent; context: { $implicit: nzContentContext }">
128+
{{ nzContent }}
129+
</ng-container>
122130
</div>
123131
</div>
124132
</div>
@@ -130,6 +138,7 @@ export class NzPopoverDirective extends NzTooltipBaseDirective {
130138
})
131139
export class NzPopoverComponent extends NzToolTipComponent {
132140
override _prefix = 'ant-popover';
141+
nzContentContext: object | null = null;
133142

134143
get hasBackdrop(): boolean {
135144
return this.nzTrigger === 'click' ? this.nzBackdrop : false;

0 commit comments

Comments
 (0)