feat(module:notification): support for more custom templates (#8046)

Author: HyperLife1119

components/notification/demo/template.md

@@ -12,5 +12,3 @@ title:
 ## en-US
 
 Use template to implement more complex interactions.
-
-

components/notification/demo/with-btn.ts

@@ -1,35 +1,28 @@
-import { Component, TemplateRef } from '@angular/core';
+import { Component, TemplateRef, ViewChild } from '@angular/core';
 
-import { NzNotificationService } from 'ng-zorro-antd/notification';
+import { NzNotificationComponent, NzNotificationService } from 'ng-zorro-antd/notification';
 
 @Component({
   selector: 'nz-demo-notification-with-btn',
   template: `
-    <ng-template #template let-notification>
-      <div class="ant-notification-notice-content">
-        <div>
-          <div class="ant-notification-notice-message">Notification Title</div>
-          <div class="ant-notification-notice-description">
-            A function will be be called after the notification is closed (automatically after the "duration" time of
-            manually).
-          </div>
-          <span class="ant-notification-notice-btn">
-            <button nz-button nzType="primary" nzSize="small" (click)="notification.close()">
-              <span>Confirm</span>
-            </button>
-          </span>
-        </div>
-      </div>
+    <ng-template #notificationBtnTpl let-notification>
+      <button nz-button nzType="primary" nzSize="small" (click)="notification.close()">Confirm</button>
     </ng-template>
-    <button nz-button [nzType]="'primary'" (click)="createBasicNotification(template)">
-      Open the notification box
-    </button>
+
+    <button nz-button [nzType]="'primary'" (click)="openNotification()"> Open the notification box </button>
   `
 })
 export class NzDemoNotificationWithBtnComponent {
+  @ViewChild('notificationBtnTpl', { static: true }) btnTemplate!: TemplateRef<{ $implicit: NzNotificationComponent }>;
   constructor(private notification: NzNotificationService) {}
 
-  createBasicNotification(template: TemplateRef<{}>): void {
-    this.notification.template(template);
+  openNotification(): void {
+    this.notification.blank(
+      'Notification Title',
+      'A function will be be called after the notification is closed (automatically after the "duration" time of manually).',
+      {
+        nzButton: this.btnTemplate
+      }
+    );
   }
 }

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

@@ -36,8 +36,8 @@ The component provides a number of service methods using the following methods a
 
 | Argument | Description | Type | Default |
 | --- | --- | --- | --- |
-| title | Title | `string` | - |
-| content | Notification content | `string` | - |
+| 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` | - |
 
 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:
 | nzClass | Custom CSS class | `object` |
 | nzData | Anything that would be used as template context | `any` |
 | nzCloseIcon | Custom close icon | `TemplateRef<void> \| string` |
+| nzButton | Custom button | `TemplateRef<{ $implicit: NzNotificationComponent }> \| string` |
 
 Methods for destruction are also provided:
 

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

@@ -35,8 +35,8 @@ import { NzNotificationModule } from 'ng-zorro-antd/notification';
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| title | 标题 | `string` | - |
-| content | 提示内容 | `string` | - |
+| title | 标题 | `string \| TemplateRef<void>` | - |
+| content | 提示内容 | `string \| TemplateRef<void>` | - |
 | options | 支持设置针对当前提示框的参数，见下方表格 | `object` | - |
 
 `options` 支持设置的参数如下：
@@ -51,7 +51,7 @@ import { NzNotificationModule } from 'ng-zorro-antd/notification';
 | nzClass | 自定义 CSS class | `object` |
 | nzData | 任何想要在模板中作为上下文的数据 | `any` |
 | nzCloseIcon | 自定义关闭图标 | `TemplateRef<void> \| string` |
-
+| nzButton | 自定义按钮 | `TemplateRef<{ $implicit: NzNotificationComponent }> \| string` |
 
 还提供了全局销毁方法：
 

components/notification/notification.component.ts

@@ -28,10 +28,7 @@ import { NzNotificationData } from './typings';
       (mouseleave)="onLeave()"
     >
       <div *ngIf="!instance.template" class="ant-notification-notice-content">
-        <div
-          class="ant-notification-notice-content"
-          [ngClass]="{ 'ant-notification-notice-with-icon': instance.type !== 'blank' }"
-        >
+        <div class="ant-notification-notice-content">
           <div [class.ant-notification-notice-with-icon]="instance.type !== 'blank'">
             <ng-container [ngSwitch]="instance.type">
               <span
@@ -59,8 +56,19 @@ import { NzNotificationData } from './typings';
                 class="ant-notification-notice-icon ant-notification-notice-icon-error"
               ></span>
             </ng-container>
-            <div class="ant-notification-notice-message" [innerHTML]="instance.title"></div>
-            <div class="ant-notification-notice-description" [innerHTML]="instance.content"></div>
+            <div class="ant-notification-notice-message">
+              <ng-container *nzStringTemplateOutlet="instance.title">
+                <div [innerHTML]="instance.title"></div>
+              </ng-container>
+            </div>
+            <div class="ant-notification-notice-description">
+              <ng-container *nzStringTemplateOutlet="instance.content">
+                <div [innerHTML]="instance.content"></div>
+              </ng-container>
+            </div>
+            <span *ngIf="instance.options?.nzButton as btn" class="ant-notification-notice-btn">
+              <ng-template [ngTemplateOutlet]="btn" [ngTemplateOutletContext]="{ $implicit: this }"></ng-template>
+            </span>
           </div>
         </div>
       </div>

components/notification/notification.service.ts

@@ -25,30 +25,50 @@ export class NzNotificationService extends NzMNService {
     super(nzSingletonService, overlay, injector);
   }
 
-  success(title: string, content: string, options?: NzNotificationDataOptions): NzNotificationRef {
-    return this.createInstance({ type: 'success', title, content }, options);
+  success(
+    title: string | TemplateRef<void>,
+    content: string | TemplateRef<void>,
+    options?: NzNotificationDataOptions
+  ): NzNotificationRef {
+    return this.create('success', title, content, options);
   }
 
-  error(title: string, content: string, options?: NzNotificationDataOptions): NzNotificationRef {
-    return this.createInstance({ type: 'error', title, content }, options);
+  error(
+    title: string | TemplateRef<void>,
+    content: string | TemplateRef<void>,
+    options?: NzNotificationDataOptions
+  ): NzNotificationRef {
+    return this.create('error', title, content, options);
   }
 
-  info(title: string, content: string, options?: NzNotificationDataOptions): NzNotificationRef {
-    return this.createInstance({ type: 'info', title, content }, options);
+  info(
+    title: string | TemplateRef<void>,
+    content: string | TemplateRef<void>,
+    options?: NzNotificationDataOptions
+  ): NzNotificationRef {
+    return this.create('info', title, content, options);
   }
 
-  warning(title: string, content: string, options?: NzNotificationDataOptions): NzNotificationRef {
-    return this.createInstance({ type: 'warning', title, content }, options);
+  warning(
+    title: string | TemplateRef<void>,
+    content: string | TemplateRef<void>,
+    options?: NzNotificationDataOptions
+  ): NzNotificationRef {
+    return this.create('warning', title, content, options);
   }
 
-  blank(title: string, content: string, options?: NzNotificationDataOptions): NzNotificationRef {
-    return this.createInstance({ type: 'blank', title, content }, options);
+  blank(
+    title: string | TemplateRef<void>,
+    content: string | TemplateRef<void>,
+    options?: NzNotificationDataOptions
+  ): NzNotificationRef {
+    return this.create('blank', title, content, options);
   }
 
   create(
     type: 'success' | 'info' | 'warning' | 'error' | 'blank' | string,
-    title: string,
-    content: string,
+    title: string | TemplateRef<void>,
+    content: string | TemplateRef<void>,
     options?: NzNotificationDataOptions
   ): NzNotificationRef {
     return this.createInstance({ type, title, content }, options);

components/notification/typings.ts

@@ -8,13 +8,16 @@ import { Subject } from 'rxjs';
 
 import { NgClassInterface, NgStyleInterface } from 'ng-zorro-antd/core/types';
 
+import type { NzNotificationComponent } from './notification.component';
+
 export type NzNotificationPlacement = 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'top' | 'bottom';
 
 export interface NzNotificationDataOptions<T = {}> {
   nzKey?: string;
   nzStyle?: NgStyleInterface;
   nzClass?: NgClassInterface | string;
   nzCloseIcon?: TemplateRef<void> | string;
+  nzButton?: TemplateRef<{ $implicit: NzNotificationComponent }>;
   nzPlacement?: NzNotificationPlacement;
   nzData?: T;
   nzDuration?: number;
@@ -23,13 +26,13 @@ export interface NzNotificationDataOptions<T = {}> {
 }
 
 export interface NzNotificationData {
+  title?: string | TemplateRef<void>;
   content?: string | TemplateRef<void>;
   createdAt?: Date;
   messageId?: string;
   options?: NzNotificationDataOptions;
   state?: 'enter' | 'leave';
   template?: TemplateRef<{}>;
-  title?: string;
   type?: 'success' | 'info' | 'warning' | 'error' | 'blank' | string;
 
   // observables exposed to users