feat(module:notification): support nzData as context in template (NG-…

…ZORRO#2926) close NG-ZORRO#2755
Ricbet · Apr 9, 2020 · a04a62e · a04a62e
1 parent 1f5d51c
commit a04a62e
Show file tree

Hide file tree

Showing 7 changed files with 70 additions and 9 deletions.
diff --git a/components/notification/demo/template.md b/components/notification/demo/template.md
@@ -0,0 +1,16 @@
+---
+order: 8
+title:
+  zh-CN: 使用模板
+  en-US: Use a template
+---
+
+## zh-CN
+
+通过模板来实现更加复杂的效果和交互。
+
+## en-US
+
+Use template to implement more complex interactions.
+
+
diff --git a/components/notification/demo/template.ts b/components/notification/demo/template.ts
@@ -0,0 +1,36 @@
+import { Component, TemplateRef, ViewChild } from '@angular/core';
+import { NzNotificationService } from 'ng-zorro-antd';
+
+@Component({
+  selector: 'nz-demo-notification-template',
+  template: `
+    <button nz-button [nzType]="'primary'" (click)="ninja()">Open the notification box</button>
+    <ng-template let-fruit="data">
+      It's a <nz-tag [nzColor]="fruit.color">{{ fruit.name }}</nz-tag>
+      <button nz-button nzType="small">Cut It!</button>
+    </ng-template>
+  `,
+  styles  : [
+    `button {
+      margin-top: 8px;
+    }`
+  ]
+})
+export class NzDemoNotificationTemplateComponent {
+  @ViewChild(TemplateRef) template: TemplateRef<{}>;
+
+  ninja(): void {
+    const fruits = [
+      { name: 'Apple', color: 'red' },
+      { name: 'Orange', color: 'orange' },
+      { name: 'Watermelon', color: 'green' }
+    ];
+
+    fruits.forEach(fruit => {
+      this.notificationService.template(this.template, { nzData: fruit });
+    });
+  }
+
+  constructor(private notificationService: NzNotificationService) {
+  }
+}
diff --git a/components/notification/doc/index.en-US.md b/components/notification/doc/index.en-US.md
@@ -63,6 +63,7 @@ The parameters that are set by the `options` support are as follows:
 | nzAnimate | Whether to turn on animation | `boolean` |
 | nzStyle | Custom inline style | `object` |
 | nzClass | Custom CSS class | `object` |
+| nzData | Anything that would be used as template context | `any` |
 
 Methods for destruction are also provided:
 

diff --git a/components/notification/doc/index.zh-CN.md b/components/notification/doc/index.zh-CN.md
@@ -62,6 +62,8 @@ subtitle: 通知提醒框
 | nzAnimate | 开关动画效果 | `boolean` |
 | nzStyle | 自定义内联样式 | `object` |
 | nzClass | 自定义 CSS class | `object` |
+| nzData | 任何想要在模板中作为上下文的数据 | `any` |
+
 
 还提供了全局销毁方法：
 

diff --git a/components/notification/nz-notification.component.html b/components/notification/nz-notification.component.html
@@ -18,7 +18,11 @@
       </div>
     </div>
   </div>
-  <ng-template [ngIf]="nzMessage.template" [ngTemplateOutlet]="nzMessage.template" [ngTemplateOutletContext]="{ $implicit: this }"></ng-template>
+  <ng-template
+    [ngIf]="nzMessage.template"
+    [ngTemplateOutlet]="nzMessage.template"
+    [ngTemplateOutletContext]="{ $implicit: this, data: nzMessage.options?.nzData }">
+  </ng-template>
   <a tabindex="0" class="ant-notification-notice-close" (click)="close()">
     <span class="ant-notification-notice-close-x">
       <i nz-icon type="close" class="ant-notification-close-icon"></i>

diff --git a/components/notification/nz-notification.definitions.ts b/components/notification/nz-notification.definitions.ts
@@ -9,12 +9,13 @@ export interface NzNotificationData extends NzMessageData {
   title?: string;
 }
 
-export interface NzNotificationDataOptions extends NzMessageDataOptions {
+export interface NzNotificationDataOptions<T = {}> extends NzMessageDataOptions {
   nzKey?: string;
-  /* tslint:disable-next-line:no-any */
-  nzStyle?: any;
-  /* tslint:disable-next-line:no-any */
-  nzClass?: any;
+  nzStyle?: any; // tslint:disable-line:no-any
+  nzClass?: any; // tslint:disable-line:no-any
+
+  /** Anything user wants renderer into a template. */
+  nzData?: T;
 }
 
 // Filled version of NzMessageData (includes more private properties)

diff --git a/components/notification/nz-notification.spec.ts b/components/notification/nz-notification.spec.ts
@@ -159,10 +159,11 @@ describe('NzNotification', () => {
     expect(overlayContainerElement.querySelector('.ant-notification-topLeft')).not.toBeNull();
   });
 
+  // Should support nzData as context.
   it('should open a message box with template ref', () => {
-    messageService.template(demoAppFixture.componentInstance.demoTemplateRef);
+    messageService.template(demoAppFixture.componentInstance.demoTemplateRef, { nzData: 'data' });
     demoAppFixture.detectChanges();
-    expect(overlayContainerElement.textContent).toContain('test template content');
+    expect(overlayContainerElement.textContent).toContain('test template contentdata');
   });
 
   it('should update an existing notification when keys are matched', () => {
@@ -179,7 +180,7 @@ describe('NzNotification', () => {
 @Component({
   selector: 'nz-demo-app-component',
   template: `
-    <ng-template>{{ 'test template content' }}</ng-template>
+    <ng-template let-data="data">{{ 'test template content' }}{{ data }}</ng-template>
   `
 })
 export class DemoAppComponent {