Skip to content

Commit 5157470

Browse files
Nicoss54Nicoss54
authored
feat(module:notification): display nzData when content is a template (#9001)
1 parent 5006ea6 commit 5157470

16 files changed

Lines changed: 197 additions & 67 deletions

‎components/message/demo/template.md‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
---
2+
order: 5
3+
title:
4+
zh-CN: 自定义模板
5+
en-US: Custom Template
6+
---
7+
8+
## zh-CN
9+
10+
您可以为消息内容创建自定义模板。
11+
通过 `nzData` 选项，您可以传递一些可选的数据给此自定义模板。
12+
13+
## en-US
14+
15+
You can have a custom template for the message content.
16+
You would have the possibility to pass some optional data to this custom template thanks to the `nzData` option

‎components/message/demo/template.ts‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { Component, TemplateRef, ViewChild } from '@angular/core';
2+
3+
import { NzButtonModule } from 'ng-zorro-antd/button';
4+
import { NzMessageComponent, NzMessageService } from 'ng-zorro-antd/message';
5+
6+
@Component({
7+
selector: 'nz-demo-message-template',
8+
imports: [NzButtonModule],
9+
template: `
10+
<button nz-button nzType="default" (click)="showMessage()">Display a custom template</button>
11+
<ng-template #customTemplate let-data="data">My Favorite Framework is {{ data }}</ng-template>
12+
`
13+
})
14+
export class NzDemoMessageTemplateComponent {
15+
@ViewChild('customTemplate', { static: true }) customTemplate!: TemplateRef<{
16+
$implicit: NzMessageComponent;
17+
data: string;
18+
}>;
19+
20+
constructor(private message: NzMessageService) {}
21+
22+
showMessage(): void {
23+
this.message.success(this.customTemplate, { nzData: 'Angular' });
24+
}
25+
}

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

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -38,11 +38,12 @@ This components provides some service methods, with usage and arguments as follo
3838

3939
The parameters that are set by the `options` support are as follows:
4040

41-
| Argument | Description | Type |
42-
| -------------- | ---------------------------------------------------------------------- | --------- |
43-
| nzDuration | Duration (milliseconds), does not disappear when set to 0 | `number` |
44-
| nzPauseOnHover | Do not remove automatically when mouse is over while setting to `true` | `boolean` |
45-
| nzAnimate | Whether to turn on animation | `boolean` |
41+
| Argument | Description | Type |
42+
|---------------|-----------------------------------------------------------------------|-------------|
43+
| nzDuration | Duration (milliseconds), does not disappear when set to 0 | `number` |
44+
| nzPauseOnHover | Do not remove automatically when mouse is over while setting to `true` | `boolean` |
45+
| nzAnimate | Whether to turn on animation | `boolean` |
46+
| nzData | Data to pass to custom template | `NzSafeAny` |
4647

4748
Methods for destruction are also provided:
4849

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ private readonly message = inject(NzMessageService);
4444
| nzDuration | 持续时间(毫秒)，当设置为0时不消失 | `number` |
4545
| nzPauseOnHover | 鼠标移上时禁止自动移除 | `boolean` |
4646
| nzAnimate | 开关动画效果 | `boolean` |
47+
| nzData | 传递给自定义模板的数据 | `NzSafeAny` |
4748

4849
还提供了全局销毁方法：
4950

‎components/message/message.component.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,9 @@ import { NzMessageData } from './typings';
5555
<nz-icon nzType="loading" />
5656
}
5757
}
58-
<ng-container *nzStringTemplateOutlet="instance.content">
58+
<ng-container
59+
*nzStringTemplateOutlet="instance.content; context: { $implicit: this, data: instance.options?.nzData }"
60+
>
5961
<span [innerHTML]="instance.content"></span>
6062
</ng-container>
6163
</div>

‎components/message/message.service.ts‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,9 @@
66
import { Overlay } from '@angular/cdk/overlay';
77
import { Injectable, Injector } from '@angular/core';
88

9-
import { NzTSType } from 'ng-zorro-antd/core/types';
10-
119
import { NzMNService } from './base';
1210
import { NzMessageContainerComponent } from './message-container.component';
13-
import { NzMessageData, NzMessageDataOptions, NzMessageRef, NzMessageType } from './typings';
11+
import { NzMessageContentType, NzMessageData, NzMessageDataOptions, NzMessageRef, NzMessageType } from './typings';
1412

1513
@Injectable({
1614
providedIn: 'root'
@@ -22,27 +20,27 @@ export class NzMessageService extends NzMNService<NzMessageContainerComponent> {
2220
super(overlay, injector);
2321
}
2422

25-
success(content: NzTSType, options?: NzMessageDataOptions): NzMessageRef {
23+
success(content: NzMessageContentType, options?: NzMessageDataOptions): NzMessageRef {
2624
return this.createInstance({ type: 'success', content }, options);
2725
}
2826

29-
error(content: NzTSType, options?: NzMessageDataOptions): NzMessageRef {
27+
error(content: NzMessageContentType, options?: NzMessageDataOptions): NzMessageRef {
3028
return this.createInstance({ type: 'error', content }, options);
3129
}
3230

33-
info(content: NzTSType, options?: NzMessageDataOptions): NzMessageRef {
31+
info(content: NzMessageContentType, options?: NzMessageDataOptions): NzMessageRef {
3432
return this.createInstance({ type: 'info', content }, options);
3533
}
3634

37-
warning(content: NzTSType, options?: NzMessageDataOptions): NzMessageRef {
35+
warning(content: NzMessageContentType, options?: NzMessageDataOptions): NzMessageRef {
3836
return this.createInstance({ type: 'warning', content }, options);
3937
}
4038

41-
loading(content: NzTSType, options?: NzMessageDataOptions): NzMessageRef {
39+
loading(content: NzMessageContentType, options?: NzMessageDataOptions): NzMessageRef {
4240
return this.createInstance({ type: 'loading', content }, options);
4341
}
4442

45-
create(type: NzMessageType | string, content: NzTSType, options?: NzMessageDataOptions): NzMessageRef {
43+
create(type: NzMessageType | string, content: NzMessageContentType, options?: NzMessageDataOptions): NzMessageRef {
4644
return this.createInstance({ type, content }, options);
4745
}
4846

‎components/message/message.spec.ts‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import { provideNoopAnimations } from '@angular/platform-browser/animations';
1111
import { NzConfigService, provideNzConfig } from 'ng-zorro-antd/core/config';
1212
import { dispatchMouseEvent } from 'ng-zorro-antd/core/testing';
1313

14+
import { NzMessageComponent } from './message.component';
1415
import { NzMessageService } from './message.service';
1516

1617
describe('message', () => {
@@ -91,11 +92,11 @@ describe('message', () => {
9192
});
9293

9394
it('should support template', fakeAsync(() => {
94-
messageService.info(testComponent.template);
95+
messageService.info(testComponent.template, { nzData: 'from template' });
9596
fixture.detectChanges();
9697
overlayContainerElement = overlayContainer.getContainerElement();
9798

98-
expect(overlayContainerElement.textContent).toContain('Content in template');
99+
expect(overlayContainerElement.textContent).toContain('Content in templatefrom template');
99100
tick(10000);
100101
}));
101102

@@ -210,8 +211,11 @@ describe('message', () => {
210211
});
211212

212213
@Component({
213-
template: `<ng-template #contentTemplate>Content in template</ng-template>`
214+
template: ` <ng-template #contentTemplate let-data="data">Content in template{{ data }}</ng-template>`
214215
})
215216
export class NzTestMessageComponent {
216-
@ViewChild('contentTemplate', { static: true }) template!: TemplateRef<void>;
217+
@ViewChild('contentTemplate', { static: true }) template!: TemplateRef<{
218+
$implicit: NzMessageComponent;
219+
data: string;
220+
}>;
217221
}

‎components/message/typings.ts‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,22 +6,28 @@
66
import { TemplateRef } from '@angular/core';
77
import { Subject } from 'rxjs';
88

9+
import { NzSafeAny } from 'ng-zorro-antd/core/types';
10+
11+
import { NzMNComponent } from './base';
12+
913
export type NzMessageType = 'success' | 'info' | 'warning' | 'error' | 'loading';
1014

15+
export type NzMessageContentType = string | TemplateRef<void | { $implicit: NzMNComponent; data: NzSafeAny }>;
16+
1117
export interface NzMessageDataOptions {
1218
nzDuration?: number;
1319
nzAnimate?: boolean;
1420
nzPauseOnHover?: boolean;
21+
nzData?: NzSafeAny;
1522
}
1623

1724
export interface NzMessageData {
1825
type?: NzMessageType | string;
19-
content?: string | TemplateRef<void>;
26+
content?: NzMessageContentType;
2027
messageId?: string;
2128
createdAt?: Date;
2229
options?: NzMessageDataOptions;
2330
state?: 'enter' | 'leave';
24-
2531
onClose?: Subject<boolean>;
2632
}
2733

‎components/notification/demo/custom-icon.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { Component, TemplateRef } from '@angular/core';
22

33
import { NzButtonModule } from 'ng-zorro-antd/button';
44
import { NzIconModule } from 'ng-zorro-antd/icon';
5-
import { NzNotificationService } from 'ng-zorro-antd/notification';
5+
import { type NzNotificationComponent, NzNotificationService } from 'ng-zorro-antd/notification';
66

77
@Component({
88
selector: 'nz-demo-notification-custom-icon',
@@ -28,7 +28,7 @@ import { NzNotificationService } from 'ng-zorro-antd/notification';
2828
export class NzDemoNotificationCustomIconComponent {
2929
constructor(private notification: NzNotificationService) {}
3030

31-
createNotification(template: TemplateRef<{}>): void {
31+
createNotification(template: TemplateRef<{ $implicit: NzNotificationComponent; data: undefined }>): void {
3232
this.notification.template(template);
3333
}
3434
}

‎components/notification/demo/template.ts‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { Component, TemplateRef, ViewChild } from '@angular/core';
22

33
import { NzButtonModule } from 'ng-zorro-antd/button';
4-
import { NzNotificationService } from 'ng-zorro-antd/notification';
4+
import { type NzNotificationComponent, NzNotificationService } from 'ng-zorro-antd/notification';
55
import { NzTagModule } from 'ng-zorro-antd/tag';
66

77
@Component({
@@ -24,7 +24,10 @@ import { NzTagModule } from 'ng-zorro-antd/tag';
2424
]
2525
})
2626
export class NzDemoNotificationTemplateComponent {
27-
@ViewChild(TemplateRef, { static: false }) template?: TemplateRef<{}>;
27+
@ViewChild(TemplateRef, { static: false }) template?: TemplateRef<{
28+
$implicit: NzNotificationComponent;
29+
data: Array<{ name: string; color: string }>;
30+
}>;
2831

2932
constructor(private notificationService: NzNotificationService) {}
3033

0 commit comments

Comments
 (0)