feat(module:message,notification): add close event

close NG-ZORRO#2458

components/message/nz-message-container.component.ts

@@ -1,4 +1,5 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, Optional, ViewEncapsulation } from '@angular/core';
+import { Subject } from 'rxjs';
 
 import { NzMessageConfig, NZ_MESSAGE_CONFIG, NZ_MESSAGE_DEFAULT_CONFIG } from './nz-message-config';
 import { NzMessageDataFilled, NzMessageDataOptions } from './nz-message.definitions';
@@ -26,34 +27,52 @@ export class NzMessageContainerComponent {
     this.config = { ...this.config, ...config };
   }
 
-  // Create a new message
+  /**
+   * Create a new message.
+   * @param message Parsed message configuration.
+   */
   createMessage(message: NzMessageDataFilled): void {
     if (this.messages.length >= this.config.nzMaxStack) {
       this.messages.splice(0, 1);
     }
     message.options = this._mergeMessageOptions(message.options);
+    message.onClose = new Subject<void>();
     this.messages.push(message);
     this.cdr.detectChanges();
   }
 
-  // Remove a message by messageId
+  /**
+   * Remove a message by `messageId`.
+   * @param messageId Id of the message to be removed.
+   */
   removeMessage(messageId: string): void {
     this.messages.some((message, index) => {
       if (message.messageId === messageId) {
         this.messages.splice(index, 1);
         this.cdr.detectChanges();
+        message.onClose.next();
+        message.onClose.complete();
+        if (message.onClick) {
+          message.onClick.complete();
+        }
         return true;
       }
     });
   }
 
-  // Remove all messages
+  /**
+   * Remove all messages.
+   */
   removeMessageAll(): void {
     this.messages = [];
     this.cdr.detectChanges();
   }
 
-  // Merge default options and custom message options
+  /**
+   * Merge default options and custom message options
+   * @param options
+   * @private
+   */
   protected _mergeMessageOptions(options: NzMessageDataOptions): NzMessageDataOptions {
     const defaultOptions: NzMessageDataOptions = {
       nzDuration    : this.config.nzDuration,

components/message/nz-message.definitions.ts

@@ -1,20 +1,30 @@
+import { Observable, Subject } from 'rxjs';
+
+export type NzMessageType = 'success' | 'info' | 'warning' | 'error' | 'loading';
+
 export interface NzMessageDataOptions {
   nzDuration?: number;
   nzAnimate?: boolean;
   nzPauseOnHover?: boolean;
 }
 
-// Message data for terminal users
+/**
+ * Message data for terminal users.
+ */
 export interface NzMessageData {
-  // TODO: remove the literal parts as it's widened anyway
-  type?: 'success' | 'info' | 'warning' | 'error' | 'loading' | string;
+  type?: NzMessageType | string;
   content?: string;
 }
 
-// Filled version of NzMessageData (includes more private properties)
+/**
+ * Filled version of NzMessageData (includes more private properties).
+ */
 export interface NzMessageDataFilled extends NzMessageData {
-  messageId: string; // Service-wide unique id, auto generated
-  state?: 'enter' | 'leave';
+  messageId: string;
+  createdAt: Date;
+
   options?: NzMessageDataOptions;
-  createdAt: Date; // Auto created
+  state?: 'enter' | 'leave';
+  onClose?: Subject<void>;
+  onClick?: Subject<MouseEvent>;
 }

components/message/nz-message.service.ts

@@ -1,12 +1,11 @@
 import { Overlay } from '@angular/cdk/overlay';
-import { ComponentPortal } from '@angular/cdk/portal';
 import { ApplicationRef, ComponentFactoryResolver, EmbeddedViewRef, Injectable, Injector, Type } from '@angular/core';
 
 import { NzMessageConfig } from './nz-message-config';
 import { NzMessageContainerComponent } from './nz-message-container.component';
 import { NzMessageData, NzMessageDataFilled, NzMessageDataOptions } from './nz-message.definitions';
 
-let globalCounter = 0; // global ID counter for messages
+let globalCounter = 0;
 
 export class NzMessageBaseService<ContainerClass extends NzMessageContainerComponent, MessageData, MessageConfig extends NzMessageConfig> {
   protected _container: ContainerClass;
@@ -17,9 +16,8 @@ export class NzMessageBaseService<ContainerClass extends NzMessageContainerCompo
     private injector: Injector,
     private cfr: ComponentFactoryResolver,
     private appRef: ApplicationRef,
-    private _idPrefix: string = '') {
-
-    // this._container = overlay.create().attach(new ComponentPortal(containerClass)).instance;
+    private _idPrefix: string = ''
+  ) {
     this._container = this.createContainer();
   }
 
@@ -34,7 +32,8 @@ export class NzMessageBaseService<ContainerClass extends NzMessageContainerCompo
   createMessage(message: MessageData, options?: NzMessageDataOptions): NzMessageDataFilled {
     // TODO: spread on literal has been disallow on latest proposal
     const resultMessage: NzMessageDataFilled = {
-      ...(message as {}), ...{
+      ...(message as {}),
+      ...{
         messageId: this._generateMessageId(),
         options,
         createdAt: new Date()

components/message/nz-message.spec.ts

@@ -152,6 +152,9 @@ describe('NzMessage', () => {
     tick(1000);
     expect(overlayContainerElement.textContent).toContain('EXISTS');
   }));
+
+  it('should emit event when message close', fakeAsync(() => {
+  }));
 });
 
 @Component({

components/notification/nz-notification-container.component.ts

@@ -1,4 +1,5 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, Optional, ViewEncapsulation } from '@angular/core';
+import { Subject } from 'rxjs';
 
 import { NzMessageContainerComponent } from '../message/nz-message-container.component';
 import { NzNotificationConfig, NZ_NOTIFICATION_CONFIG, NZ_NOTIFICATION_DEFAULT_CONFIG } from './nz-notification-config';
@@ -34,6 +35,8 @@ export class NzNotificationContainerComponent extends NzMessageContainerComponen
    */
   createMessage(notification: NzNotificationDataFilled): void {
     notification.options = this._mergeMessageOptions(notification.options);
+    notification.onClick = new Subject<MouseEvent>();
+    notification.onClose = new Subject<void>();
     const key = notification.options.nzKey;
     const notificationWithSameKey = this.messages.find(msg => msg.options.nzKey === notification.options.nzKey);
     if (key && notificationWithSameKey) {

components/notification/nz-notification.component.html

@@ -2,6 +2,7 @@
   [ngStyle]="nzMessage.options.nzStyle"
   [ngClass]="nzMessage.options.nzClass"
   [@notificationMotion]="state"
+  (click)="onClick($event)"
   (mouseenter)="onEnter()"
   (mouseleave)="onLeave()">
   <div *ngIf="!nzMessage.template" class="ant-notification-notice-content">

components/notification/nz-notification.component.ts

@@ -22,6 +22,10 @@ export class NzNotificationComponent extends NzMessageComponent {
     this._destroy();
   }
 
+  onClick(e: MouseEvent): void {
+    this.nzMessage.onClick.next(e);
+  }
+
   get state(): string {
     if (this.nzMessage.state === 'enter') {
       if ((this.container.config.nzPlacement === 'topLeft') || (this.container.config.nzPlacement === 'bottomLeft')) {

components/notification/nz-notification.definitions.ts

@@ -1,4 +1,5 @@
 import { TemplateRef } from '@angular/core';
+import { Subject } from 'rxjs';
 
 import { NzMessageData, NzMessageDataOptions } from '../message/nz-message.definitions';
 
@@ -21,7 +22,10 @@ export interface NzNotificationDataOptions<T = {}> extends NzMessageDataOptions
 // Filled version of NzMessageData (includes more private properties)
 export interface NzNotificationDataFilled extends NzNotificationData {
   messageId: string; // Service-wide unique id, auto generated
+  createdAt: Date; // Auto created
+
   state?: 'enter' | 'leave';
   options?: NzNotificationDataOptions;
-  createdAt: Date; // Auto created
+  onClose?: Subject<void>;
+  onClick?: Subject<MouseEvent>;
 }