diff --git a/components/notification/demo/template.md b/components/notification/demo/template.md
new file mode 100644
index 0000000000..db7730590e
--- /dev/null
+++ 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
new file mode 100644
index 0000000000..ab8c6c03ba
--- /dev/null
+++ 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: `
+
+
+ It's a {{ fruit.name }}
+
+
+ `,
+ 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
index a8fc58fcbb..dad9ced2bf 100644
--- 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
index f88d65c6aa..2e39e4f4b4 100644
--- 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
index 616ed9425b..013379f4a6 100644
--- a/components/notification/nz-notification.component.html
+++ b/components/notification/nz-notification.component.html
@@ -18,7 +18,11 @@
-
+
+
diff --git a/components/notification/nz-notification.definitions.ts b/components/notification/nz-notification.definitions.ts
index 6717ee4794..e45effc5d2 100644
--- 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 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
index db166e78f3..42c9bb1a3b 100644
--- 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: `
- {{ 'test template content' }}
+ {{ 'test template content' }}{{ data }}
`
})
export class DemoAppComponent {