From 5cd0232b523343f1e32f9d86325d0661ba2bb4fc Mon Sep 17 00:00:00 2001
From: Wilson Zeng <jackzcs@gmail.com>
Date: Tue, 20 Mar 2018 20:23:13 +0800
Subject: [PATCH] fix(module:message,notification): fix message/notification
 cause multi-detection error while used in dynamic creating component

close #391
---
 components/message/nz-message.service.ts      | 35 ++++++++++++++++---
 .../notification/nz-notification.service.ts   | 11 ++++--
 2 files changed, 38 insertions(+), 8 deletions(-)

diff --git a/components/message/nz-message.service.ts b/components/message/nz-message.service.ts
index c834c977795..e3a75ec15c8 100644
--- a/components/message/nz-message.service.ts
+++ b/components/message/nz-message.service.ts
@@ -1,6 +1,6 @@
 import { Overlay } from '@angular/cdk/overlay';
 import { ComponentPortal } from '@angular/cdk/portal';
-import { Injectable, Type } from '@angular/core';
+import { ApplicationRef, ComponentFactoryResolver, EmbeddedViewRef, Injectable, Injector, Type } from '@angular/core';
 
 import { NzMessageConfig } from './nz-message-config';
 import { NzMessageContainerComponent } from './nz-message-container.component';
@@ -11,8 +11,16 @@ let globalCounter = 0; // global ID counter for messages
 export class NzMessageBaseService<ContainerClass extends NzMessageContainerComponent, MessageData, MessageConfig extends NzMessageConfig> {
   protected _container: ContainerClass;
 
-  constructor(overlay: Overlay, containerClass: Type<ContainerClass>, private _idPrefix: string = '') {
-    this._container = overlay.create().attach(new ComponentPortal(containerClass)).instance;
+  constructor(
+    private overlay: Overlay,
+    private containerClass: Type<ContainerClass>,
+    private injector: Injector,
+    private cfr: ComponentFactoryResolver,
+    private appRef: ApplicationRef,
+    private _idPrefix: string = '') {
+
+    // this._container = overlay.create().attach(new ComponentPortal(containerClass)).instance;
+    this._container = this.createContainer();
   }
 
   remove(messageId?: string): void {
@@ -44,13 +52,30 @@ export class NzMessageBaseService<ContainerClass extends NzMessageContainerCompo
   protected _generateMessageId(): string {
     return this._idPrefix + globalCounter++;
   }
+
+  // Manually creating container for overlay to avoid multi-checking error, see: https://github.com/NG-ZORRO/ng-zorro-antd/issues/391
+  // NOTE: we never clean up the container component and it's overlay resources, if we should, we need to do it by our own codes.
+  private createContainer(): ContainerClass {
+    const factory = this.cfr.resolveComponentFactory(this.containerClass);
+    const componentRef = factory.create(this.injector); // Use root injector
+    componentRef.changeDetectorRef.detectChanges(); // Immediately change detection to avoid multi-checking error
+    this.appRef.attachView(componentRef.hostView); // Load view into app root
+    this.overlay.create().overlayElement.appendChild((componentRef.hostView as EmbeddedViewRef<{}>).rootNodes[0] as HTMLElement);
+
+    return componentRef.instance;
+  }
 }
 
 @Injectable()
 export class NzMessageService extends NzMessageBaseService<NzMessageContainerComponent, NzMessageData, NzMessageConfig> {
 
-  constructor(overlay: Overlay) {
-    super(overlay, NzMessageContainerComponent, 'message-');
+  constructor(
+    overlay: Overlay,
+    injector: Injector,
+    cfr: ComponentFactoryResolver,
+    appRef: ApplicationRef) {
+
+    super(overlay, NzMessageContainerComponent, injector, cfr, appRef, 'message-');
   }
 
   // Shortcut methods
diff --git a/components/notification/nz-notification.service.ts b/components/notification/nz-notification.service.ts
index 0cef437ca86..dca4a2a3f11 100644
--- a/components/notification/nz-notification.service.ts
+++ b/components/notification/nz-notification.service.ts
@@ -1,5 +1,5 @@
 import { Overlay } from '@angular/cdk/overlay';
-import { Injectable, TemplateRef } from '@angular/core';
+import { ApplicationRef, ComponentFactoryResolver, Injectable, Injector, TemplateRef } from '@angular/core';
 
 import { NzMessageBaseService } from '../message/nz-message.service';
 
@@ -10,8 +10,13 @@ import { NzNotificationData, NzNotificationDataFilled, NzNotificationDataOptions
 @Injectable()
 export class NzNotificationService extends NzMessageBaseService<NzNotificationContainerComponent, NzNotificationData, NzNotificationConfig> {
 
-  constructor(overlay: Overlay) {
-    super(overlay, NzNotificationContainerComponent, 'notification-');
+  constructor(
+    overlay: Overlay,
+    injector: Injector,
+    cfr: ComponentFactoryResolver,
+    appRef: ApplicationRef) {
+
+    super(overlay, NzNotificationContainerComponent, injector, cfr, appRef, 'notification-');
   }
 
   // Shortcut methods