Skip to content

Commit 9689c42

Browse files
HyperLife1119HyperLife1119
authored
feat(module:notification): support for more custom templates (#8046)
1 parent a0b8a0b commit 9689c42

7 files changed

Lines changed: 71 additions & 48 deletions

File tree

‎components/notification/demo/template.md‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,5 +12,3 @@ title:
1212
## en-US
1313

1414
Use template to implement more complex interactions.
15-
16-

‎components/notification/demo/with-btn.ts‎

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

3-
import { NzNotificationService } from 'ng-zorro-antd/notification';
3+
import { NzNotificationComponent, NzNotificationService } from 'ng-zorro-antd/notification';
44

55
@Component({
66
selector: 'nz-demo-notification-with-btn',
77
template: `
8-
<ng-template #template let-notification>
9-
<div class="ant-notification-notice-content">
10-
<div>
11-
<div class="ant-notification-notice-message">Notification Title</div>
12-
<div class="ant-notification-notice-description">
13-
A function will be be called after the notification is closed (automatically after the "duration" time of
14-
manually).
15-
</div>
16-
<span class="ant-notification-notice-btn">
17-
<button nz-button nzType="primary" nzSize="small" (click)="notification.close()">
18-
<span>Confirm</span>
19-
</button>
20-
</span>
21-
</div>
22-
</div>
8+
<ng-template #notificationBtnTpl let-notification>
9+
<button nz-button nzType="primary" nzSize="small" (click)="notification.close()">Confirm</button>
2310
</ng-template>
24-
<button nz-button [nzType]="'primary'" (click)="createBasicNotification(template)">
25-
Open the notification box
26-
</button>
11+
12+
<button nz-button [nzType]="'primary'" (click)="openNotification()"> Open the notification box </button>
2713
`
2814
})
2915
export class NzDemoNotificationWithBtnComponent {
16+
@ViewChild('notificationBtnTpl', { static: true }) btnTemplate!: TemplateRef<{ $implicit: NzNotificationComponent }>;
3017
constructor(private notification: NzNotificationService) {}
3118

32-
createBasicNotification(template: TemplateRef<{}>): void {
33-
this.notification.template(template);
19+
openNotification(): void {
20+
this.notification.blank(
21+
'Notification Title',
22+
'A function will be be called after the notification is closed (automatically after the "duration" time of manually).',
23+
{
24+
nzButton: this.btnTemplate
25+
}
26+
);
3427
}
3528
}

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,8 +36,8 @@ The component provides a number of service methods using the following methods a
3636

3737
| Argument | Description | Type | Default |
3838
| --- | --- | --- | --- |
39-
| title | Title | `string` | - |
40-
| content | Notification content | `string` | - |
39+
| title | Title | `string \| TemplateRef<void>` | - |
40+
| content | Notification content | `string \| TemplateRef<void>` | - |
4141
| options | Support setting the parameters for the current notification box, see the table below | `object` | - |
4242

4343
The parameters that are set by the `options` support are as follows:
@@ -52,6 +52,7 @@ The parameters that are set by the `options` support are as follows:
5252
| nzClass | Custom CSS class | `object` |
5353
| nzData | Anything that would be used as template context | `any` |
5454
| nzCloseIcon | Custom close icon | `TemplateRef<void> \| string` |
55+
| nzButton | Custom button | `TemplateRef<{ $implicit: NzNotificationComponent }> \| string` |
5556

5657
Methods for destruction are also provided:
5758

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -35,8 +35,8 @@ import { NzNotificationModule } from 'ng-zorro-antd/notification';
3535

3636
| 参数 | 说明 | 类型 | 默认值 |
3737
| --- | --- | --- | --- |
38-
| title | 标题 | `string` | - |
39-
| content | 提示内容 | `string` | - |
38+
| title | 标题 | `string \| TemplateRef<void>` | - |
39+
| content | 提示内容 | `string \| TemplateRef<void>` | - |
4040
| options | 支持设置针对当前提示框的参数，见下方表格 | `object` | - |
4141

4242
`options` 支持设置的参数如下：
@@ -51,7 +51,7 @@ import { NzNotificationModule } from 'ng-zorro-antd/notification';
5151
| nzClass | 自定义 CSS class | `object` |
5252
| nzData | 任何想要在模板中作为上下文的数据 | `any` |
5353
| nzCloseIcon | 自定义关闭图标 | `TemplateRef<void> \| string` |
54-
54+
| nzButton | 自定义按钮 | `TemplateRef<{ $implicit: NzNotificationComponent }> \| string` |
5555

5656
还提供了全局销毁方法：
5757

‎components/notification/notification.component.ts‎

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -28,10 +28,7 @@ import { NzNotificationData } from './typings';
2828
(mouseleave)="onLeave()"
2929
>
3030
<div *ngIf="!instance.template" class="ant-notification-notice-content">
31-
<div
32-
class="ant-notification-notice-content"
33-
[ngClass]="{ 'ant-notification-notice-with-icon': instance.type !== 'blank' }"
34-
>
31+
<div class="ant-notification-notice-content">
3532
<div [class.ant-notification-notice-with-icon]="instance.type !== 'blank'">
3633
<ng-container [ngSwitch]="instance.type">
3734
<span
@@ -59,8 +56,19 @@ import { NzNotificationData } from './typings';
5956
class="ant-notification-notice-icon ant-notification-notice-icon-error"
6057
></span>
6158
</ng-container>
62-
<div class="ant-notification-notice-message" [innerHTML]="instance.title"></div>
63-
<div class="ant-notification-notice-description" [innerHTML]="instance.content"></div>
59+
<div class="ant-notification-notice-message">
60+
<ng-container *nzStringTemplateOutlet="instance.title">
61+
<div [innerHTML]="instance.title"></div>
62+
</ng-container>
63+
</div>
64+
<div class="ant-notification-notice-description">
65+
<ng-container *nzStringTemplateOutlet="instance.content">
66+
<div [innerHTML]="instance.content"></div>
67+
</ng-container>
68+
</div>
69+
<span *ngIf="instance.options?.nzButton as btn" class="ant-notification-notice-btn">
70+
<ng-template [ngTemplateOutlet]="btn" [ngTemplateOutletContext]="{ $implicit: this }"></ng-template>
71+
</span>
6472
</div>
6573
</div>
6674
</div>

‎components/notification/notification.service.ts‎

Lines changed: 32 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -25,30 +25,50 @@ export class NzNotificationService extends NzMNService {
2525
super(nzSingletonService, overlay, injector);
2626
}
2727

28-
success(title: string, content: string, options?: NzNotificationDataOptions): NzNotificationRef {
29-
return this.createInstance({ type: 'success', title, content }, options);
28+
success(
29+
title: string | TemplateRef<void>,
30+
content: string | TemplateRef<void>,
31+
options?: NzNotificationDataOptions
32+
): NzNotificationRef {
33+
return this.create('success', title, content, options);
3034
}
3135

32-
error(title: string, content: string, options?: NzNotificationDataOptions): NzNotificationRef {
33-
return this.createInstance({ type: 'error', title, content }, options);
36+
error(
37+
title: string | TemplateRef<void>,
38+
content: string | TemplateRef<void>,
39+
options?: NzNotificationDataOptions
40+
): NzNotificationRef {
41+
return this.create('error', title, content, options);
3442
}
3543

36-
info(title: string, content: string, options?: NzNotificationDataOptions): NzNotificationRef {
37-
return this.createInstance({ type: 'info', title, content }, options);
44+
info(
45+
title: string | TemplateRef<void>,
46+
content: string | TemplateRef<void>,
47+
options?: NzNotificationDataOptions
48+
): NzNotificationRef {
49+
return this.create('info', title, content, options);
3850
}
3951

40-
warning(title: string, content: string, options?: NzNotificationDataOptions): NzNotificationRef {
41-
return this.createInstance({ type: 'warning', title, content }, options);
52+
warning(
53+
title: string | TemplateRef<void>,
54+
content: string | TemplateRef<void>,
55+
options?: NzNotificationDataOptions
56+
): NzNotificationRef {
57+
return this.create('warning', title, content, options);
4258
}
4359

44-
blank(title: string, content: string, options?: NzNotificationDataOptions): NzNotificationRef {
45-
return this.createInstance({ type: 'blank', title, content }, options);
60+
blank(
61+
title: string | TemplateRef<void>,
62+
content: string | TemplateRef<void>,
63+
options?: NzNotificationDataOptions
64+
): NzNotificationRef {
65+
return this.create('blank', title, content, options);
4666
}
4767

4868
create(
4969
type: 'success' | 'info' | 'warning' | 'error' | 'blank' | string,
50-
title: string,
51-
content: string,
70+
title: string | TemplateRef<void>,
71+
content: string | TemplateRef<void>,
5272
options?: NzNotificationDataOptions
5373
): NzNotificationRef {
5474
return this.createInstance({ type, title, content }, options);

‎components/notification/typings.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,16 @@ import { Subject } from 'rxjs';
88

99
import { NgClassInterface, NgStyleInterface } from 'ng-zorro-antd/core/types';
1010

11+
import type { NzNotificationComponent } from './notification.component';
12+
1113
export type NzNotificationPlacement = 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'top' | 'bottom';
1214

1315
export interface NzNotificationDataOptions<T = {}> {
1416
nzKey?: string;
1517
nzStyle?: NgStyleInterface;
1618
nzClass?: NgClassInterface | string;
1719
nzCloseIcon?: TemplateRef<void> | string;
20+
nzButton?: TemplateRef<{ $implicit: NzNotificationComponent }>;
1821
nzPlacement?: NzNotificationPlacement;
1922
nzData?: T;
2023
nzDuration?: number;
@@ -23,13 +26,13 @@ export interface NzNotificationDataOptions<T = {}> {
2326
}
2427

2528
export interface NzNotificationData {
29+
title?: string | TemplateRef<void>;
2630
content?: string | TemplateRef<void>;
2731
createdAt?: Date;
2832
messageId?: string;
2933
options?: NzNotificationDataOptions;
3034
state?: 'enter' | 'leave';
3135
template?: TemplateRef<{}>;
32-
title?: string;
3336
type?: 'success' | 'info' | 'warning' | 'error' | 'blank' | string;
3437

3538
// observables exposed to users

0 commit comments

Comments
 (0)