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 {