diff --git a/components/core/message/index.ts b/components/core/message/index.ts new file mode 100644 index 00000000000..f17e95188c8 --- /dev/null +++ b/components/core/message/index.ts @@ -0,0 +1,9 @@ +/** + * @license + * Copyright Alibaba.com All Rights Reserved. + * + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE + */ + +export * from './public-api'; diff --git a/components/core/message/nz-message-base.service.ts b/components/core/message/nz-message-base.service.ts new file mode 100644 index 00000000000..a4a3f88deab --- /dev/null +++ b/components/core/message/nz-message-base.service.ts @@ -0,0 +1,87 @@ +/** + * @license + * Copyright Alibaba.com All Rights Reserved. + * + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE + */ + +import { Overlay } from '@angular/cdk/overlay'; +import { ApplicationRef, ComponentFactoryResolver, EmbeddedViewRef, Injector, Type } from '@angular/core'; +import { + NzMessageConfig, + NzMessageContainerComponent, + NzMessageData, + NzMessageDataFilled, + NzMessageDataOptions +} from 'ng-zorro-antd'; + +let globalCounter = 0; +const containerMap = new Map(); + +export class NzMessageBaseService< + ContainerClass extends NzMessageContainerComponent, + MessageData, + MessageConfig extends NzMessageConfig +> { + protected _container: ContainerClass; + + constructor( + private overlay: Overlay, + private containerClass: Type, + private injector: Injector, + private cfr: ComponentFactoryResolver, + private appRef: ApplicationRef, + private name: string = '' + ) { + this._container = this.createContainer(); + containerMap.set(this.name, this._container); + } + + remove(messageId?: string): void { + if (messageId) { + this._container.removeMessage(messageId); + } else { + this._container.removeMessageAll(); + } + } + + createMessage(message: MessageData, options?: NzMessageDataOptions): NzMessageDataFilled { + const resultMessage: NzMessageDataFilled = { + ...(message as NzMessageData), + ...{ + createdAt: new Date(), + messageId: this._generateMessageId(), + options + } + }; + this._container.createMessage(resultMessage); + + return resultMessage; + } + + config(config: MessageConfig): void { + this._container.setConfig(config); + } + + protected _generateMessageId(): string { + return `${this.name}-${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 { + if (containerMap.has(this.name)) { + return containerMap.get(this.name) as 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 + const overlayPane = this.overlay.create().overlayElement; + overlayPane.style.zIndex = '1010'; // Patching: assign the same zIndex of ant-message to it's parent overlay panel, to the ant-message's zindex work. + overlayPane.appendChild((componentRef.hostView as EmbeddedViewRef<{}>).rootNodes[0] as HTMLElement); + + return componentRef.instance; + } +} diff --git a/components/core/message/public-api.ts b/components/core/message/public-api.ts new file mode 100644 index 00000000000..ccf4501ddd2 --- /dev/null +++ b/components/core/message/public-api.ts @@ -0,0 +1,9 @@ +/** + * @license + * Copyright Alibaba.com All Rights Reserved. + * + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE + */ + +export * from './nz-message-base.service'; diff --git a/components/core/public-api.ts b/components/core/public-api.ts index e76d3260bad..a918a81fb2d 100644 --- a/components/core/public-api.ts +++ b/components/core/public-api.ts @@ -23,3 +23,4 @@ export * from './dropdown/public-api'; export * from './logger/public-api'; export * from './responsive/public-api'; export * from './trans-button/public-api'; +export * from './message/public-api'; diff --git a/components/message/nz-message.module.ts b/components/message/nz-message.module.ts index eacc5ca1ffb..e45ec13713d 100644 --- a/components/message/nz-message.module.ts +++ b/components/message/nz-message.module.ts @@ -15,9 +15,10 @@ import { NzIconModule } from 'ng-zorro-antd/icon'; import { NZ_MESSAGE_DEFAULT_CONFIG_PROVIDER } from './nz-message-config'; import { NzMessageContainerComponent } from './nz-message-container.component'; import { NzMessageComponent } from './nz-message.component'; +import { NzMessageServiceModule } from './nz-message.service.module'; @NgModule({ - imports: [CommonModule, OverlayModule, NzIconModule, NzAddOnModule], + imports: [CommonModule, OverlayModule, NzIconModule, NzAddOnModule, NzMessageServiceModule], declarations: [NzMessageContainerComponent, NzMessageComponent], providers: [NZ_MESSAGE_DEFAULT_CONFIG_PROVIDER], entryComponents: [NzMessageContainerComponent] diff --git a/components/message/nz-message.service.module.ts b/components/message/nz-message.service.module.ts new file mode 100644 index 00000000000..a1ef873d447 --- /dev/null +++ b/components/message/nz-message.service.module.ts @@ -0,0 +1,12 @@ +/** + * @license + * Copyright Alibaba.com All Rights Reserved. + * + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE + */ + +import { NgModule } from '@angular/core'; + +@NgModule() +export class NzMessageServiceModule {} diff --git a/components/message/nz-message.service.ts b/components/message/nz-message.service.ts index 06e5cf6f788..4ec5a7f7e16 100644 --- a/components/message/nz-message.service.ts +++ b/components/message/nz-message.service.ts @@ -7,87 +7,17 @@ */ import { Overlay } from '@angular/cdk/overlay'; -import { - ApplicationRef, - ComponentFactoryResolver, - EmbeddedViewRef, - Injectable, - Injector, - TemplateRef, - Type -} from '@angular/core'; +import { ApplicationRef, ComponentFactoryResolver, Injectable, Injector, TemplateRef } from '@angular/core'; + +import { NzMessageBaseService } from 'ng-zorro-antd/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; - -export class NzMessageBaseService< - ContainerClass extends NzMessageContainerComponent, - MessageData, - MessageConfig extends NzMessageConfig -> { - protected _container: ContainerClass; - - constructor( - private overlay: Overlay, - private containerClass: Type, - private injector: Injector, - private cfr: ComponentFactoryResolver, - private appRef: ApplicationRef, - private _idPrefix: string = '' - ) { - this._container = this.createContainer(); - } - - remove(messageId?: string): void { - if (messageId) { - this._container.removeMessage(messageId); - } else { - this._container.removeMessageAll(); - } - } - - createMessage(message: MessageData, options?: NzMessageDataOptions): NzMessageDataFilled { - const resultMessage: NzMessageDataFilled = { - ...(message as NzMessageData), - ...{ - createdAt: new Date(), - messageId: this._generateMessageId(), - options - } - }; - this._container.createMessage(resultMessage); - - return resultMessage; - } - - config(config: MessageConfig): void { - this._container.setConfig(config); - } - - 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 - const overlayPane = this.overlay.create().overlayElement; - overlayPane.style.zIndex = '1010'; // Patching: assign the same zIndex of ant-message to it's parent overlay panel, to the ant-message's zindex work. - overlayPane.appendChild((componentRef.hostView as EmbeddedViewRef<{}>).rootNodes[0] as HTMLElement); - - return componentRef.instance; - } -} +import { NzMessageServiceModule } from './nz-message.service.module'; @Injectable({ - providedIn: 'root' + providedIn: NzMessageServiceModule }) export class NzMessageService extends NzMessageBaseService< NzMessageContainerComponent, diff --git a/components/message/public-api.ts b/components/message/public-api.ts index 5cbe6de0bd1..c1995f13d59 100644 --- a/components/message/public-api.ts +++ b/components/message/public-api.ts @@ -7,6 +7,7 @@ */ export * from './nz-message.service'; +export * from './nz-message.service.module'; export * from './nz-message.module'; export * from './nz-message.component'; export * from './nz-message.definitions'; diff --git a/components/notification/nz-notification.module.ts b/components/notification/nz-notification.module.ts index 5435b48433a..f76ef58fc68 100644 --- a/components/notification/nz-notification.module.ts +++ b/components/notification/nz-notification.module.ts @@ -14,9 +14,10 @@ import { NzIconModule } from 'ng-zorro-antd/icon'; import { NZ_NOTIFICATION_DEFAULT_CONFIG_PROVIDER } from './nz-notification-config'; import { NzNotificationContainerComponent } from './nz-notification-container.component'; import { NzNotificationComponent } from './nz-notification.component'; +import { NzNotificationServiceModule } from './nz-notification.service.module'; @NgModule({ - imports: [CommonModule, OverlayModule, NzIconModule], + imports: [CommonModule, OverlayModule, NzIconModule, NzNotificationServiceModule], declarations: [NzNotificationComponent, NzNotificationContainerComponent], providers: [NZ_NOTIFICATION_DEFAULT_CONFIG_PROVIDER], entryComponents: [NzNotificationContainerComponent] diff --git a/components/notification/nz-notification.service.module.ts b/components/notification/nz-notification.service.module.ts new file mode 100644 index 00000000000..ac54f554b3f --- /dev/null +++ b/components/notification/nz-notification.service.module.ts @@ -0,0 +1,12 @@ +/** + * @license + * Copyright Alibaba.com All Rights Reserved. + * + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE + */ + +import { NgModule } from '@angular/core'; + +@NgModule() +export class NzNotificationServiceModule {} diff --git a/components/notification/nz-notification.service.ts b/components/notification/nz-notification.service.ts index bca7f2fd420..8480bd8545f 100644 --- a/components/notification/nz-notification.service.ts +++ b/components/notification/nz-notification.service.ts @@ -9,14 +9,15 @@ import { Overlay } from '@angular/cdk/overlay'; import { ApplicationRef, ComponentFactoryResolver, Injectable, Injector, TemplateRef } from '@angular/core'; -import { NzMessageBaseService } from 'ng-zorro-antd/message'; +import { NzMessageBaseService } from 'ng-zorro-antd/core'; import { NzNotificationConfig } from './nz-notification-config'; import { NzNotificationContainerComponent } from './nz-notification-container.component'; import { NzNotificationData, NzNotificationDataFilled, NzNotificationDataOptions } from './nz-notification.definitions'; +import { NzNotificationServiceModule } from './nz-notification.service.module'; @Injectable({ - providedIn: 'root' + providedIn: NzNotificationServiceModule }) export class NzNotificationService extends NzMessageBaseService< NzNotificationContainerComponent, diff --git a/components/notification/public-api.ts b/components/notification/public-api.ts index 07abaa98051..dbcfb67b6de 100644 --- a/components/notification/public-api.ts +++ b/components/notification/public-api.ts @@ -11,4 +11,5 @@ export * from './nz-notification.component'; export * from './nz-notification.module'; export * from './nz-notification.definitions'; export * from './nz-notification.service'; +export * from './nz-notification.service.module'; export * from './nz-notification-container.component';