fix(module:modal): global config cannot work with service mode

close #5223

components/badge/badge.component.ts

@@ -110,7 +110,7 @@ export class NzBadgeComponent implements OnInit, AfterViewInit, OnChanges, OnDes
   @Input() nzStyle: { [key: string]: string } | null = null;
   @Input() nzText?: string;
   @Input() nzTitle?: string | null | undefined;
-  @Input() nzStatus?: NzBadgeStatusType;
+  @Input() nzStatus?: NzBadgeStatusType | string;
   @Input() nzCount?: number | TemplateRef<NzSafeAny>;
   @Input() nzOffset?: [number, number];
 

components/modal/modal-config.ts

@@ -6,14 +6,6 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
-import { InjectionToken } from '@angular/core';
-
-export interface NzModalConfig {
-  nzMask?: boolean;
-  nzMaskClosable?: boolean;
-}
-export const NZ_MODAL_CONFIG = new InjectionToken<NzModalConfig>('NZ_MODAL_CONFIG');
-
 export const ZOOM_CLASS_NAME_MAP = {
   enter: 'zoom-enter',
   enterActive: 'zoom-enter-active',
@@ -29,3 +21,4 @@ export const FADE_CLASS_NAME_MAP = {
 };
 
 export const MODAL_MASK_CLASS_NAME = 'ant-modal-mask';
+export const NZ_CONFIG_COMPONENT_NAME = 'modal';

components/modal/modal-confirm-container.component.ts

@@ -18,18 +18,17 @@ import {
   EventEmitter,
   Inject,
   NgZone,
-  OnDestroy,
   Optional,
   Output,
   Renderer2,
   ViewChild
 } from '@angular/core';
 import { ANIMATION_MODULE_TYPE } from '@angular/platform-browser/animations';
+import { NzConfigService } from 'ng-zorro-antd/core/config';
 import { NzSafeAny } from 'ng-zorro-antd/core/types';
 
 import { NzI18nService } from 'ng-zorro-antd/i18n';
 
-import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
 import { nzModalAnimations } from './modal-animations';
@@ -108,13 +107,12 @@ import { ModalOptions } from './modal-types';
     '(mouseup)': 'onMouseup($event)'
   }
 })
-export class NzModalConfirmContainerComponent extends BaseModalContainer implements OnDestroy {
+export class NzModalConfirmContainerComponent extends BaseModalContainer {
   @ViewChild(CdkPortalOutlet, { static: true }) portalOutlet!: CdkPortalOutlet;
   @ViewChild('modalElement', { static: true }) modalElementRef!: ElementRef<HTMLDivElement>;
   @Output() readonly cancelTriggered = new EventEmitter<void>();
   @Output() readonly okTriggered = new EventEmitter<void>();
   locale: { okText?: string; cancelText?: string } = {};
-  private destroy$ = new Subject<void>();
 
   constructor(
     private i18n: NzI18nService,
@@ -124,11 +122,12 @@ export class NzModalConfirmContainerComponent extends BaseModalContainer impleme
     render: Renderer2,
     zone: NgZone,
     overlayRef: OverlayRef,
+    nzConfigService: NzConfigService,
     public config: ModalOptions,
     @Optional() @Inject(DOCUMENT) document: NzSafeAny,
     @Optional() @Inject(ANIMATION_MODULE_TYPE) animationType: string
   ) {
-    super(elementRef, focusTrapFactory, cdr, render, zone, overlayRef, config, document, animationType);
+    super(elementRef, focusTrapFactory, cdr, render, zone, overlayRef, nzConfigService, config, document, animationType);
     this.i18n.localeChange.pipe(takeUntil(this.destroy$)).subscribe(() => {
       this.locale = this.i18n.getLocaleData('Modal');
     });
@@ -141,9 +140,4 @@ export class NzModalConfirmContainerComponent extends BaseModalContainer impleme
   onOk(): void {
     this.okTriggered.emit();
   }
-
-  ngOnDestroy(): void {
-    this.destroy$.next();
-    this.destroy$.complete();
-  }
 }

components/modal/modal-container.component.ts

@@ -22,6 +22,7 @@ import {
   ViewChild
 } from '@angular/core';
 import { ANIMATION_MODULE_TYPE } from '@angular/platform-browser/animations';
+import { NzConfigService } from 'ng-zorro-antd/core/config';
 import { NzSafeAny } from 'ng-zorro-antd/core/types';
 
 import { nzModalAnimations } from './modal-animations';
@@ -83,10 +84,11 @@ export class NzModalContainerComponent extends BaseModalContainer {
     render: Renderer2,
     zone: NgZone,
     overlayRef: OverlayRef,
+    nzConfigService: NzConfigService,
     public config: ModalOptions,
     @Optional() @Inject(DOCUMENT) document: NzSafeAny,
     @Optional() @Inject(ANIMATION_MODULE_TYPE) animationType: string
   ) {
-    super(elementRef, focusTrapFactory, cdr, render, zone, overlayRef, config, document, animationType);
+    super(elementRef, focusTrapFactory, cdr, render, zone, overlayRef, nzConfigService, config, document, animationType);
   }
 }

components/modal/modal-container.ts

@@ -11,12 +11,16 @@ import { FocusTrap, FocusTrapFactory } from '@angular/cdk/a11y';
 import { OverlayRef } from '@angular/cdk/overlay';
 import { BasePortalOutlet, CdkPortalOutlet, ComponentPortal, TemplatePortal } from '@angular/cdk/portal';
 import { ChangeDetectorRef, ComponentRef, ElementRef, EmbeddedViewRef, EventEmitter, NgZone, OnDestroy, Renderer2 } from '@angular/core';
+import { NzConfigService } from 'ng-zorro-antd/core/config';
 import { NzSafeAny } from 'ng-zorro-antd/core/types';
 import { getElementOffset } from 'ng-zorro-antd/core/util';
-import { FADE_CLASS_NAME_MAP, MODAL_MASK_CLASS_NAME, ZOOM_CLASS_NAME_MAP } from './modal-config';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { FADE_CLASS_NAME_MAP, MODAL_MASK_CLASS_NAME, NZ_CONFIG_COMPONENT_NAME, ZOOM_CLASS_NAME_MAP } from './modal-config';
 
 import { NzModalRef } from './modal-ref';
 import { ModalOptions } from './modal-types';
+import { getValueWithConfig } from './utils';
 
 export function throwNzModalContentAlreadyAttachedError(): never {
   throw Error('Attempting to attach modal content after content is already attached');
@@ -40,6 +44,19 @@ export class BaseModalContainer extends BasePortalOutlet implements OnDestroy {
   private focusTrap!: FocusTrap;
   private latestMousedownTarget: HTMLElement | null = null;
   private oldMaskStyle: { [key: string]: string } | null = null;
+  protected destroy$ = new Subject();
+
+  get showMask(): boolean {
+    const defaultConfig = this.nzConfigService.getConfigForComponent(NZ_CONFIG_COMPONENT_NAME) || {};
+
+    return !!getValueWithConfig<boolean>(this.config.nzMask, defaultConfig.nzMask, true);
+  }
+
+  get maskClosable(): boolean {
+    const defaultConfig = this.nzConfigService.getConfigForComponent(NZ_CONFIG_COMPONENT_NAME) || {};
+
+    return !!getValueWithConfig<boolean>(this.config.nzMaskClosable, defaultConfig.nzMaskClosable, true);
+  }
 
   constructor(
     protected elementRef: ElementRef,
@@ -48,6 +65,7 @@ export class BaseModalContainer extends BasePortalOutlet implements OnDestroy {
     protected render: Renderer2,
     protected zone: NgZone,
     protected overlayRef: OverlayRef,
+    protected nzConfigService: NzConfigService,
     public config: ModalOptions,
     document?: NzSafeAny,
     protected animationType?: string
@@ -56,18 +74,20 @@ export class BaseModalContainer extends BasePortalOutlet implements OnDestroy {
     this.document = document;
     this.isStringContent = typeof config.nzContent === 'string';
     this.setContainer();
-  }
-
-  ngOnDestroy(): void {
-    this.onDestroy.emit();
+    this.nzConfigService
+      .getConfigChangeEventForComponent(NZ_CONFIG_COMPONENT_NAME)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(() => {
+        this.updateMaskClassname();
+      });
   }
 
   onMousedown(e: MouseEvent): void {
     this.latestMousedownTarget = (e.target as HTMLElement) || null;
   }
 
   onMouseup(e: MouseEvent): void {
-    if (e.target === this.latestMousedownTarget && e.target === this.elementRef.nativeElement) {
+    if (e.target === this.latestMousedownTarget && e.target === this.elementRef.nativeElement && this.showMask && this.maskClosable) {
       this.containerClick.emit();
     }
     this.latestMousedownTarget = null;
@@ -264,6 +284,15 @@ export class BaseModalContainer extends BasePortalOutlet implements OnDestroy {
     return container instanceof HTMLElement ? container : null;
   }
 
+  updateMaskClassname(): void {
+    const backdropElement = this.overlayRef.backdropElement;
+    if (this.showMask) {
+      this.render.addClass(backdropElement, MODAL_MASK_CLASS_NAME);
+    } else {
+      this.render.removeClass(backdropElement, MODAL_MASK_CLASS_NAME);
+    }
+  }
+
   onAnimationDone(event: AnimationEvent): void {
     if (event.toState === 'void') {
       return;
@@ -293,4 +322,10 @@ export class BaseModalContainer extends BasePortalOutlet implements OnDestroy {
     this.state = 'exit';
     this.cdr.markForCheck();
   }
+
+  ngOnDestroy(): void {
+    this.onDestroy.emit();
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
 }

components/modal/modal-ref.ts

@@ -65,7 +65,7 @@ export class NzModalRef<T = NzSafeAny, R = NzSafeAny> implements NzModalLegacyAP
       });
 
     containerInstance.containerClick.pipe(take(1)).subscribe(() => {
-      const cancelable = !this.config.nzCancelLoading && !this.config.nzOkLoading && config.nzMask && config.nzMaskClosable;
+      const cancelable = !this.config.nzCancelLoading && !this.config.nzOkLoading;
       if (cancelable) {
         this.trigger(NzTriggerAction.CANCEL);
       }

components/modal/modal-types.ts

@@ -31,8 +31,8 @@ export class ModalOptions<T = NzSafeAny, R = NzSafeAny> {
   nzCancelLoading?: boolean = false;
   nzNoAnimation?: boolean = false;
   nzAutofocus?: 'ok' | 'cancel' | 'auto' | null = 'auto';
-  nzMask?: boolean = true;
-  nzMaskClosable?: boolean = true;
+  nzMask?: boolean;
+  nzMaskClosable?: boolean;
   nzKeyboard?: boolean = true;
   nzZIndex?: number = 1000;
   nzWidth?: number | string = 520;

components/modal/modal.component.ts

@@ -24,7 +24,6 @@ import {
 } from '@angular/core';
 
 import { NzButtonType } from 'ng-zorro-antd/button';
-import { NzConfigService, WithConfig } from 'ng-zorro-antd/core/config';
 import { BooleanInput, NzSafeAny } from 'ng-zorro-antd/core/types';
 import { InputBoolean } from 'ng-zorro-antd/core/util';
 import { Observable } from 'rxjs';
@@ -36,8 +35,6 @@ import { ModalButtonOptions, ModalOptions, ModalTypes, OnClickCallback, StyleObj
 import { NzModalService } from './modal.service';
 import { getConfigFromComponent } from './utils';
 
-const NZ_CONFIG_COMPONENT_NAME = 'modal';
-
 @Component({
   selector: 'nz-modal',
   exportAs: 'nzModal',
@@ -57,9 +54,9 @@ export class NzModalComponent<T = NzSafeAny, R = NzSafeAny> implements OnChanges
   static ngAcceptInputType_nzKeyboard: BooleanInput;
   static ngAcceptInputType_nzNoAnimation: BooleanInput;
 
-  @Input() @WithConfig(NZ_CONFIG_COMPONENT_NAME) @InputBoolean() nzMask: boolean = true;
-  @Input() @WithConfig(NZ_CONFIG_COMPONENT_NAME) @InputBoolean() nzMaskClosable: boolean = true;
-  @Input() @WithConfig(NZ_CONFIG_COMPONENT_NAME) @InputBoolean() nzCloseOnNavigation: boolean = true;
+  @Input() @InputBoolean() nzMask?: boolean;
+  @Input() @InputBoolean() nzMaskClosable?: boolean;
+  @Input() @InputBoolean() nzCloseOnNavigation?: boolean;
   @Input() @InputBoolean() nzVisible: boolean = false;
   @Input() @InputBoolean() nzClosable: boolean = true;
   @Input() @InputBoolean() nzOkLoading: boolean = false;
@@ -117,12 +114,7 @@ export class NzModalComponent<T = NzSafeAny, R = NzSafeAny> implements OnChanges
     return this.nzAfterClose.asObservable();
   }
 
-  constructor(
-    public nzConfigService: NzConfigService,
-    private cdr: ChangeDetectorRef,
-    private modal: NzModalService,
-    private viewContainerRef: ViewContainerRef
-  ) {}
+  constructor(private cdr: ChangeDetectorRef, private modal: NzModalService, private viewContainerRef: ViewContainerRef) {}
 
   open(): void {
     if (!this.nzVisible) {

components/modal/modal.service.ts

@@ -9,19 +9,20 @@
 import { ComponentType, Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay';
 import { ComponentPortal, PortalInjector, TemplatePortal } from '@angular/cdk/portal';
 import { Injectable, Injector, OnDestroy, Optional, SkipSelf, TemplateRef } from '@angular/core';
+import { NzConfigService } from 'ng-zorro-antd/core/config';
 import { warn } from 'ng-zorro-antd/core/logger';
 import { IndexableObject, NzSafeAny } from 'ng-zorro-antd/core/types';
 import { isNotNil } from 'ng-zorro-antd/core/util';
 import { defer, Observable, Subject } from 'rxjs';
 import { startWith } from 'rxjs/operators';
 
-import { MODAL_MASK_CLASS_NAME } from './modal-config';
+import { MODAL_MASK_CLASS_NAME, NZ_CONFIG_COMPONENT_NAME } from './modal-config';
 import { NzModalConfirmContainerComponent } from './modal-confirm-container.component';
 import { BaseModalContainer } from './modal-container';
 import { NzModalContainerComponent } from './modal-container.component';
 import { NzModalRef } from './modal-ref';
 import { ConfirmType, ModalOptions } from './modal-types';
-import { applyConfigDefaults, setContentInstanceParams } from './utils';
+import { applyConfigDefaults, getValueWithConfig, setContentInstanceParams } from './utils';
 
 type ContentType<T> = ComponentType<T> | TemplateRef<T> | string;
 
@@ -43,7 +44,12 @@ export class NzModalService implements OnDestroy {
     this.openModals.length ? this._afterAllClosed : this._afterAllClosed.pipe(startWith(undefined))
   ) as Observable<void>;
 
-  constructor(private overlay: Overlay, private injector: Injector, @Optional() @SkipSelf() private parentModal: NzModalService) {}
+  constructor(
+    private overlay: Overlay,
+    private injector: Injector,
+    private nzConfigService: NzConfigService,
+    @Optional() @SkipSelf() private parentModal: NzModalService
+  ) {}
 
   create<T, R = NzSafeAny>(config: ModalOptions<T, R>): NzModalRef<T, R> {
     return this.open<T, R>(config.nzContent as ComponentType<T>, config);
@@ -120,14 +126,15 @@ export class NzModalService implements OnDestroy {
   }
 
   private createOverlay(config: ModalOptions): OverlayRef {
+    const globalConfig = this.nzConfigService.getConfigForComponent(NZ_CONFIG_COMPONENT_NAME) || {};
     const overlayConfig = new OverlayConfig({
       hasBackdrop: true,
       scrollStrategy: this.overlay.scrollStrategies.block(),
       positionStrategy: this.overlay.position().global(),
-      disposeOnNavigation: config.nzCloseOnNavigation
+      disposeOnNavigation: getValueWithConfig(config.nzCloseOnNavigation, globalConfig.nzCloseOnNavigation, true)
     });
 
-    if (config.nzMask) {
+    if (getValueWithConfig(config.nzMask, globalConfig.nzMask, true)) {
       overlayConfig.backdropClass = MODAL_MASK_CLASS_NAME;
     }