feat(module:notification): display nzData when content is a template (NG-ZORRO#9001)

Nicoss54 · web-flow · commit 5157470dd7d8 · 2025-02-20T07:55:56.000+08:00
diff --git a/components/message/demo/template.md b/components/message/demo/template.md
@@ -0,0 +1,16 @@
+---
+order: 5
+title:
+  zh-CN: 自定义模板
+  en-US: Custom Template
+---
+
+## zh-CN
+
+您可以为消息内容创建自定义模板。
+通过 `nzData` 选项，您可以传递一些可选的数据给此自定义模板。
+
+## en-US
+
+You can have a custom template for the message content.
+You would have the possibility to pass some optional data to this custom template thanks to the `nzData` option
diff --git a/components/message/demo/template.ts b/components/message/demo/template.ts
@@ -0,0 +1,25 @@
+import { Component, TemplateRef, ViewChild } from '@angular/core';
+
+import { NzButtonModule } from 'ng-zorro-antd/button';
+import { NzMessageComponent, NzMessageService } from 'ng-zorro-antd/message';
+
+@Component({
+  selector: 'nz-demo-message-template',
+  imports: [NzButtonModule],
+  template: `
+    <button nz-button nzType="default" (click)="showMessage()">Display a custom template</button>
+    <ng-template #customTemplate let-data="data">My Favorite Framework is {{ data }}</ng-template>
+  `
+})
+export class NzDemoMessageTemplateComponent {
+  @ViewChild('customTemplate', { static: true }) customTemplate!: TemplateRef<{
+    $implicit: NzMessageComponent;
+    data: string;
+  }>;
+
+  constructor(private message: NzMessageService) {}
+
+  showMessage(): void {
+    this.message.success(this.customTemplate, { nzData: 'Angular' });
+  }
+}
diff --git a/components/message/doc/index.en-US.md b/components/message/doc/index.en-US.md
@@ -38,11 +38,12 @@ This components provides some service methods, with usage and arguments as follo
 
 The parameters that are set by the `options` support are as follows:
 
-| Argument       | Description                                                            | Type      |
-| -------------- | ---------------------------------------------------------------------- | --------- |
-| nzDuration     | Duration (milliseconds), does not disappear when set to 0              | `number`  |
-| nzPauseOnHover | Do not remove automatically when mouse is over while setting to `true` | `boolean` |
-| nzAnimate      | Whether to turn on animation                                           | `boolean` |
+| Argument      | Description                                                           | Type        |
+|---------------|-----------------------------------------------------------------------|-------------|
+| nzDuration    | Duration (milliseconds), does not disappear when set to 0             | `number`    |
+| nzPauseOnHover | Do not remove automatically when mouse is over while setting to `true` | `boolean`   |
+| nzAnimate     | Whether to turn on animation                                          | `boolean`   |
+| nzData        | Data to pass to custom template                                       | `NzSafeAny` |
 
 Methods for destruction are also provided:
 
diff --git a/components/message/doc/index.zh-CN.md b/components/message/doc/index.zh-CN.md
@@ -44,6 +44,7 @@ private readonly message = inject(NzMessageService);
 | nzDuration     | 持续时间(毫秒)，当设置为0时不消失 | `number`  |
 | nzPauseOnHover | 鼠标移上时禁止自动移除            | `boolean` |
 | nzAnimate      | 开关动画效果                      | `boolean` |
+| nzData        | 传递给自定义模板的数据                                       | `NzSafeAny` |
 
 还提供了全局销毁方法：
 
diff --git a/components/message/message.component.ts b/components/message/message.component.ts
@@ -55,7 +55,9 @@ import { NzMessageData } from './typings';
               <nz-icon nzType="loading" />
             }
           }
-          <ng-container *nzStringTemplateOutlet="instance.content">
+          <ng-container
+            *nzStringTemplateOutlet="instance.content; context: { $implicit: this, data: instance.options?.nzData }"
+          >
             <span [innerHTML]="instance.content"></span>
           </ng-container>
         </div>
diff --git a/components/message/message.service.ts b/components/message/message.service.ts
@@ -6,11 +6,9 @@
 import { Overlay } from '@angular/cdk/overlay';
 import { Injectable, Injector } from '@angular/core';
 
-import { NzTSType } from 'ng-zorro-antd/core/types';
-
 import { NzMNService } from './base';
 import { NzMessageContainerComponent } from './message-container.component';
-import { NzMessageData, NzMessageDataOptions, NzMessageRef, NzMessageType } from './typings';
+import { NzMessageContentType, NzMessageData, NzMessageDataOptions, NzMessageRef, NzMessageType } from './typings';
 
 @Injectable({
   providedIn: 'root'
@@ -22,27 +20,27 @@ export class NzMessageService extends NzMNService<NzMessageContainerComponent> {
     super(overlay, injector);
   }
 
-  success(content: NzTSType, options?: NzMessageDataOptions): NzMessageRef {
+  success(content: NzMessageContentType, options?: NzMessageDataOptions): NzMessageRef {
     return this.createInstance({ type: 'success', content }, options);
   }
 
-  error(content: NzTSType, options?: NzMessageDataOptions): NzMessageRef {
+  error(content: NzMessageContentType, options?: NzMessageDataOptions): NzMessageRef {
     return this.createInstance({ type: 'error', content }, options);
   }
 
-  info(content: NzTSType, options?: NzMessageDataOptions): NzMessageRef {
+  info(content: NzMessageContentType, options?: NzMessageDataOptions): NzMessageRef {
     return this.createInstance({ type: 'info', content }, options);
   }
 
-  warning(content: NzTSType, options?: NzMessageDataOptions): NzMessageRef {
+  warning(content: NzMessageContentType, options?: NzMessageDataOptions): NzMessageRef {
     return this.createInstance({ type: 'warning', content }, options);
   }
 
-  loading(content: NzTSType, options?: NzMessageDataOptions): NzMessageRef {
+  loading(content: NzMessageContentType, options?: NzMessageDataOptions): NzMessageRef {
     return this.createInstance({ type: 'loading', content }, options);
   }
 
-  create(type: NzMessageType | string, content: NzTSType, options?: NzMessageDataOptions): NzMessageRef {
+  create(type: NzMessageType | string, content: NzMessageContentType, options?: NzMessageDataOptions): NzMessageRef {
     return this.createInstance({ type, content }, options);
   }
 
diff --git a/components/message/message.spec.ts b/components/message/message.spec.ts
@@ -11,6 +11,7 @@ import { provideNoopAnimations } from '@angular/platform-browser/animations';
 import { NzConfigService, provideNzConfig } from 'ng-zorro-antd/core/config';
 import { dispatchMouseEvent } from 'ng-zorro-antd/core/testing';
 
+import { NzMessageComponent } from './message.component';
 import { NzMessageService } from './message.service';
 
 describe('message', () => {
@@ -91,11 +92,11 @@ describe('message', () => {
   });
 
   it('should support template', fakeAsync(() => {
-    messageService.info(testComponent.template);
+    messageService.info(testComponent.template, { nzData: 'from template' });
     fixture.detectChanges();
     overlayContainerElement = overlayContainer.getContainerElement();
 
-    expect(overlayContainerElement.textContent).toContain('Content in template');
+    expect(overlayContainerElement.textContent).toContain('Content in templatefrom template');
     tick(10000);
   }));
 
@@ -210,8 +211,11 @@ describe('message', () => {
 });
 
 @Component({
-  template: `<ng-template #contentTemplate>Content in template</ng-template>`
+  template: ` <ng-template #contentTemplate let-data="data">Content in template{{ data }}</ng-template>`
 })
 export class NzTestMessageComponent {
-  @ViewChild('contentTemplate', { static: true }) template!: TemplateRef<void>;
+  @ViewChild('contentTemplate', { static: true }) template!: TemplateRef<{
+    $implicit: NzMessageComponent;
+    data: string;
+  }>;
 }
diff --git a/components/message/typings.ts b/components/message/typings.ts
@@ -6,22 +6,28 @@
 import { TemplateRef } from '@angular/core';
 import { Subject } from 'rxjs';
 
+import { NzSafeAny } from 'ng-zorro-antd/core/types';
+
+import { NzMNComponent } from './base';
+
 export type NzMessageType = 'success' | 'info' | 'warning' | 'error' | 'loading';
 
+export type NzMessageContentType = string | TemplateRef<void | { $implicit: NzMNComponent; data: NzSafeAny }>;
+
 export interface NzMessageDataOptions {
   nzDuration?: number;
   nzAnimate?: boolean;
   nzPauseOnHover?: boolean;
+  nzData?: NzSafeAny;
 }
 
 export interface NzMessageData {
   type?: NzMessageType | string;
-  content?: string | TemplateRef<void>;
+  content?: NzMessageContentType;
   messageId?: string;
   createdAt?: Date;
   options?: NzMessageDataOptions;
   state?: 'enter' | 'leave';
-
   onClose?: Subject<boolean>;
 }
 
diff --git a/components/notification/demo/custom-icon.ts b/components/notification/demo/custom-icon.ts
@@ -2,7 +2,7 @@ import { Component, TemplateRef } from '@angular/core';
 
 import { NzButtonModule } from 'ng-zorro-antd/button';
 import { NzIconModule } from 'ng-zorro-antd/icon';
-import { NzNotificationService } from 'ng-zorro-antd/notification';
+import { type NzNotificationComponent, NzNotificationService } from 'ng-zorro-antd/notification';
 
 @Component({
   selector: 'nz-demo-notification-custom-icon',
@@ -28,7 +28,7 @@ import { NzNotificationService } from 'ng-zorro-antd/notification';
 export class NzDemoNotificationCustomIconComponent {
   constructor(private notification: NzNotificationService) {}
 
-  createNotification(template: TemplateRef<{}>): void {
+  createNotification(template: TemplateRef<{ $implicit: NzNotificationComponent; data: undefined }>): void {
     this.notification.template(template);
   }
 }
diff --git a/components/notification/demo/template.ts b/components/notification/demo/template.ts
@@ -1,7 +1,7 @@
 import { Component, TemplateRef, ViewChild } from '@angular/core';
 
 import { NzButtonModule } from 'ng-zorro-antd/button';
-import { NzNotificationService } from 'ng-zorro-antd/notification';
+import { type NzNotificationComponent, NzNotificationService } from 'ng-zorro-antd/notification';
 import { NzTagModule } from 'ng-zorro-antd/tag';
 
 @Component({
@@ -24,7 +24,10 @@ import { NzTagModule } from 'ng-zorro-antd/tag';
   ]
 })
 export class NzDemoNotificationTemplateComponent {
-  @ViewChild(TemplateRef, { static: false }) template?: TemplateRef<{}>;
+  @ViewChild(TemplateRef, { static: false }) template?: TemplateRef<{
+    $implicit: NzNotificationComponent;
+    data: Array<{ name: string; color: string }>;
+  }>;
 
   constructor(private notificationService: NzNotificationService) {}
 
diff --git a/components/notification/doc/index.en-US.md b/components/notification/doc/index.en-US.md
@@ -36,16 +36,16 @@ The component provides a number of service methods using the following methods a
 - `NzNotificationService.info(title, content, [options])`
 - `NzNotificationService.warning(title, content, [options])`
 
-| Argument | Description                                                                          | Type                          | Default |
-| -------- | ------------------------------------------------------------------------------------ | ----------------------------- | ------- |
-| title    | Title                                                                                | `string \| TemplateRef<void>` | -       |
-| content  | Notification content                                                                 | `string \| TemplateRef<void>` | -       |
-| options  | Support setting the parameters for the current notification box, see the table below | `object`                      | -       |
+| Argument | Description                                                                          | Type                                                                              | Default |
+|----------|--------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------|---------|
+| title    | Title                                                                                | `string \| TemplateRef<void>`                                                     | -       |
+| content  | Notification content                                                                 | `NzNotificationContentType` | -       |
+| options  | Support setting the parameters for the current notification box, see the table below | `object`                                                                          | -       |
 
 The parameters that are set by the `options` support are as follows:
 
 | Argument       | Description                                                            | Type                                                            |
-| -------------- | ---------------------------------------------------------------------- | --------------------------------------------------------------- |
+|----------------|------------------------------------------------------------------------|-----------------------------------------------------------------|
 | nzKey          | The unique identifier of the Notification                              | `string`                                                        |
 | nzDuration     | Duration (milliseconds), does not disappear when set to 0              | `number`                                                        |
 | nzPauseOnHover | Do not remove automatically when mouse is over while setting to `true` | `boolean`                                                       |
@@ -65,7 +65,7 @@ Methods for destruction are also provided:
 You can use `NzConfigService` to configure this component globally. Please check the [Global Configuration](/docs/global-config/en) chapter for more information.
 
 | Parameter      | Description                                                                             | Type             | Default    |
-| -------------- | --------------------------------------------------------------------------------------- | ---------------- | ---------- |
+|----------------|-----------------------------------------------------------------------------------------|------------------|------------|
 | nzDuration     | Duration (milliseconds), does not disappear when set to 0                               | `number`         | 4500       |
 | nzMaxStack     | The maximum number of notifications that can be displayed at the same time              | `number`         | 8          |
 | nzPauseOnHover | Do not remove automatically when mouse is over while setting to `true`                  | `boolean`        | `true`     |
diff --git a/components/notification/doc/index.zh-CN.md b/components/notification/doc/index.zh-CN.md
diff --git a/components/notification/notification.component.ts b/components/notification/notification.component.ts
diff --git a/components/notification/notification.service.ts b/components/notification/notification.service.ts
diff --git a/components/notification/notification.spec.ts b/components/notification/notification.spec.ts
diff --git a/components/notification/typings.ts b/components/notification/typings.ts

Original file line number	Diff line number	Diff line change
`@@ -55,7 +55,9 @@ import { NzMessageData } from './typings';`
`55`	`55`	`<nz-icon nzType="loading" />`
`56`	`56`	`}`
`57`	`57`	`}`
`58`		`- <ng-container *nzStringTemplateOutlet="instance.content">`
	`58`	`+ <ng-container`
	`59`	`+ *nzStringTemplateOutlet="instance.content; context: { $implicit: this, data: instance.options?.nzData }"`
	`60`	`+ >`
`59`	`61`	`<span [innerHTML]="instance.content"></span>`
`60`	`62`	`</ng-container>`
`61`	`63`	`</div>`
Original file line number	Diff line number	Diff line change
`@@ -6,11 +6,9 @@`
`6`	`6`	`import { Overlay } from '@angular/cdk/overlay';`
`7`	`7`	`import { Injectable, Injector } from '@angular/core';`
`8`	`8`
`9`		`-import { NzTSType } from 'ng-zorro-antd/core/types';`
`10`		`-`
`11`	`9`	`import { NzMNService } from './base';`
`12`	`10`	`import { NzMessageContainerComponent } from './message-container.component';`
`13`		`-import { NzMessageData, NzMessageDataOptions, NzMessageRef, NzMessageType } from './typings';`
	`11`	`+import { NzMessageContentType, NzMessageData, NzMessageDataOptions, NzMessageRef, NzMessageType } from './typings';`
`14`	`12`
`15`	`13`	`@Injectable({`
`16`	`14`	`providedIn: 'root'`
`@@ -22,27 +20,27 @@ export class NzMessageService extends NzMNService<NzMessageContainerComponent> {`
`22`	`20`	`super(overlay, injector);`
`23`	`21`	`}`
`24`	`22`
`25`		`- success(content: NzTSType, options?: NzMessageDataOptions): NzMessageRef {`
	`23`	`+ success(content: NzMessageContentType, options?: NzMessageDataOptions): NzMessageRef {`
`26`	`24`	`return this.createInstance({ type: 'success', content }, options);`
`27`	`25`	`}`
`28`	`26`
`29`		`- error(content: NzTSType, options?: NzMessageDataOptions): NzMessageRef {`
	`27`	`+ error(content: NzMessageContentType, options?: NzMessageDataOptions): NzMessageRef {`
`30`	`28`	`return this.createInstance({ type: 'error', content }, options);`
`31`	`29`	`}`
`32`	`30`
`33`		`- info(content: NzTSType, options?: NzMessageDataOptions): NzMessageRef {`
	`31`	`+ info(content: NzMessageContentType, options?: NzMessageDataOptions): NzMessageRef {`
`34`	`32`	`return this.createInstance({ type: 'info', content }, options);`
`35`	`33`	`}`
`36`	`34`
`37`		`- warning(content: NzTSType, options?: NzMessageDataOptions): NzMessageRef {`
	`35`	`+ warning(content: NzMessageContentType, options?: NzMessageDataOptions): NzMessageRef {`
`38`	`36`	`return this.createInstance({ type: 'warning', content }, options);`
`39`	`37`	`}`
`40`	`38`
`41`		`- loading(content: NzTSType, options?: NzMessageDataOptions): NzMessageRef {`
	`39`	`+ loading(content: NzMessageContentType, options?: NzMessageDataOptions): NzMessageRef {`
`42`	`40`	`return this.createInstance({ type: 'loading', content }, options);`
`43`	`41`	`}`
`44`	`42`
`45`		`- create(type: NzMessageType \| string, content: NzTSType, options?: NzMessageDataOptions): NzMessageRef {`
	`43`	`+ create(type: NzMessageType \| string, content: NzMessageContentType, options?: NzMessageDataOptions): NzMessageRef {`
`46`	`44`	`return this.createInstance({ type, content }, options);`
`47`	`45`	`}`
`48`	`46`
Original file line number	Diff line number	Diff line change
`@@ -2,7 +2,7 @@ import { Component, TemplateRef } from '@angular/core';`
`2`	`2`
`3`	`3`	`import { NzButtonModule } from 'ng-zorro-antd/button';`
`4`	`4`	`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';`
`6`	`6`
`7`	`7`	`@Component({`
`8`	`8`	`selector: 'nz-demo-notification-custom-icon',`
`@@ -28,7 +28,7 @@ import { NzNotificationService } from 'ng-zorro-antd/notification';`
`28`	`28`	`export class NzDemoNotificationCustomIconComponent {`
`29`	`29`	`constructor(private notification: NzNotificationService) {}`
`30`	`30`
`31`		`- createNotification(template: TemplateRef<{}>): void {`
	`31`	`+ createNotification(template: TemplateRef<{ $implicit: NzNotificationComponent; data: undefined }>): void {`
`32`	`32`	`this.notification.template(template);`
`33`	`33`	`}`
`34`	`34`	`}`