fix(module: auto-complete, drawer): cannot reopen when reuse route sn…

…apshots(#5165)


close #5142

components/auto-complete/autocomplete-trigger.directive.ts

@@ -35,8 +35,8 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { NzSafeAny, OnChangeType, OnTouchedType } from 'ng-zorro-antd/core/types';
 import { NzInputGroupWhitSuffixOrPrefixDirective } from 'ng-zorro-antd/input';
 
-import { fromEvent, merge, Subscription } from 'rxjs';
-import { delay, distinct, map, take, tap } from 'rxjs/operators';
+import { fromEvent, merge, Subject, Subscription } from 'rxjs';
+import { delay, distinct, map, take, takeUntil, tap } from 'rxjs/operators';
 
 import { NzAutocompleteOptionComponent } from './autocomplete-option.component';
 import { NzAutocompleteComponent } from './autocomplete.component';
@@ -83,6 +83,7 @@ export class NzAutocompleteTriggerDirective implements ControlValueAccessor, OnD
     }
   }
 
+  private destroy$ = new Subject<void>();
   private overlayRef: OverlayRef | null = null;
   private portal: TemplatePortal<{}> | null = null;
   private positionStrategy!: FlexibleConnectedPositionStrategy;
@@ -138,7 +139,7 @@ export class NzAutocompleteTriggerDirective implements ControlValueAccessor, OnD
         this.overlayBackdropClickSubscription.unsubscribe();
         this.overlayPositionChangeSubscription.unsubscribe();
         this.optionsChangeSubscription.unsubscribe();
-        this.overlayRef.detach();
+        this.overlayRef.dispose();
         this.overlayRef = null;
         this.portal = null;
       }
@@ -284,6 +285,12 @@ export class NzAutocompleteTriggerDirective implements ControlValueAccessor, OnD
       this.selectionChangeSubscription = this.subscribeSelectionChange();
       this.overlayBackdropClickSubscription = this.subscribeOverlayBackdropClick();
       this.optionsChangeSubscription = this.subscribeOptionsChange();
+      this.overlayRef
+        .detachments()
+        .pipe(takeUntil(this.destroy$))
+        .subscribe(() => {
+          this.closePanel();
+        });
     }
     this.nzAutocomplete.isOpen = this.panelOpen = true;
   }

components/core/config/config.ts

@@ -143,6 +143,7 @@ export interface DescriptionsConfig {
 export interface DrawerConfig {
   nzMask?: boolean;
   nzMaskClosable?: boolean;
+  nzCloseOnNavigation?: boolean;
 }
 
 export interface EmptyConfig {

components/drawer/doc/index.en-US.md

@@ -26,6 +26,7 @@ import { NzDrawerModule } from 'ng-zorro-antd/drawer';
 | `[nzClosable]` | Whether a close (x) button is visible on top right of the Drawer dialog or not. | `boolean` | `true` |
 | `[nzMask]` | Whether to show mask or not. | `boolean` | `true` | ✅ |
 | `[nzMaskClosable]` | Clicking on the mask (area outside the Drawer) to close the Drawer or not. | `boolean` | `true` | ✅ |
+| nzCloseOnNavigation    | Whether to close the drawer when the navigation history changes | `boolean` | `true` | ✅ |
 | `[nzKeyboard]` | Whether support press esc to close | `boolean` | `true` |
 | `[nzMaskStyle]` | Style for Drawer's mask element. | `object` | `{}` |
 | `[nzBodyStyle]` | Body style for drawer body element. Such as height, padding etc. | `object` | `{}` |
@@ -55,6 +56,7 @@ import { NzDrawerModule } from 'ng-zorro-antd/drawer';
 | nzClosable | Whether a close (x) button is visible on top right of the Drawer dialog or not. | `boolean` | `true` |
 | nzOnCancel | Execute when click on the mask or the upper cancel button, This function returns a promise, which is automatically closed when the execution is complete or the promise ends (return false to prevent closing) | `() => Promise<any>` | - |
 | nzMaskClosable | Clicking on the mask (area outside the Drawer) to close the Drawer or not. | `boolean` | `true` |
+| nzCloseOnNavigation    | Whether to close the drawer when the navigation history changes | `boolean` | `true` |
 | nzMask | Whether to show mask or not. | `boolean` | `true` |
 | nzKeyboard | Whether support press esc to close | `boolean` | `true` |
 | nzMaskStyle | Style for Drawer's mask element. | `object` | `{}` |

components/drawer/doc/index.zh-CN.md

@@ -25,6 +25,7 @@ import { NzDrawerModule } from 'ng-zorro-antd/drawer';
 | `[nzClosable]` | 是否显示右上角的关闭按钮 | `boolean` | `true` |
 | `[nzMaskClosable]` | 点击蒙层是否允许关闭 | `boolean` | `true` | ✅ |
 | `[nzMask]` | 是否展示遮罩 | `boolean` | `true` | ✅ |
+| `[nzCloseOnNavigation]`    | 导航历史变化时是否关闭抽屉组件 | `boolean` | `true` | ✅ |
 | `[nzMaskStyle]` | 遮罩样式 | `object` | `{}` |
 | `[nzKeyboard]` | 是否支持键盘 esc 关闭 | `boolean` | `true` |
 | `[nzBodyStyle]` | Drawer body 样式 | `object` | `{}` |
@@ -55,6 +56,7 @@ import { NzDrawerModule } from 'ng-zorro-antd/drawer';
 | nzClosable | 是否显示右上角的关闭按钮 | `boolean` | `true` |
 | nzMaskClosable | 点击蒙层是否允许关闭 | `boolean` | `true` |
 | nzMask | 是否展示遮罩 | `boolean` | `true` |
+| nzCloseOnNavigation    | 导航历史变化时是否关闭抽屉组件 | `boolean` | `true` |
 | nzKeyboard | 是否支持键盘esc关闭 | `boolean` | `true` |
 | nzMaskStyle | 遮罩样式 | `object` | `{}` |
 | nzBodyStyle | Modal body 样式 | `object` | `{}` |

components/drawer/drawer-options.ts

@@ -15,6 +15,7 @@ export type NzDrawerPlacement = 'left' | 'right' | 'top' | 'bottom';
 export interface NzDrawerOptionsOfComponent<T = NzSafeAny, D = NzSafeAny> {
   nzClosable?: boolean;
   nzMaskClosable?: boolean;
+  nzCloseOnNavigation?: boolean;
   nzMask?: boolean;
   nzKeyboard?: boolean;
   nzNoAnimation?: boolean;

components/drawer/drawer.component.ts

@@ -103,11 +103,13 @@ export class NzDrawerComponent<T = NzSafeAny, R = NzSafeAny, D = NzSafeAny> exte
   static ngAcceptInputType_nzMask: BooleanInput;
   static ngAcceptInputType_nzNoAnimation: BooleanInput;
   static ngAcceptInputType_nzKeyboard: BooleanInput;
+  static ngAcceptInputType_nzCloseOnNavigation: BooleanInput;
 
   @Input() nzContent!: TemplateRef<{ $implicit: D; drawerRef: NzDrawerRef<R> }> | Type<T>;
   @Input() @InputBoolean() nzClosable: boolean = true;
   @Input() @WithConfig(NZ_CONFIG_COMPONENT_NAME) @InputBoolean() nzMaskClosable: boolean = true;
   @Input() @WithConfig(NZ_CONFIG_COMPONENT_NAME) @InputBoolean() nzMask: boolean = true;
+  @Input() @WithConfig(NZ_CONFIG_COMPONENT_NAME) @InputBoolean() nzCloseOnNavigation: boolean = true;
   @Input() @InputBoolean() nzNoAnimation = false;
   @Input() @InputBoolean() nzKeyboard: boolean = true;
   @Input() nzTitle?: string | TemplateRef<{}>;
@@ -292,6 +294,7 @@ export class NzDrawerComponent<T = NzSafeAny, R = NzSafeAny, D = NzSafeAny> exte
   }
 
   open(): void {
+    this.attachOverlay();
     this.isOpen = true;
     this.overlayKeyboardDispatcher.add(this.overlayRef!);
     this.updateOverlayStyle();
@@ -341,19 +344,23 @@ export class NzDrawerComponent<T = NzSafeAny, R = NzSafeAny, D = NzSafeAny> exte
             this.nzOnClose.emit();
           }
         });
+      this.overlayRef
+        .detachments()
+        .pipe(takeUntil(this.destroy$))
+        .subscribe(() => {
+          this.disposeOverlay();
+        });
     }
   }
 
   private disposeOverlay(): void {
-    if (this.overlayRef) {
-      this.overlayRef.dispose();
-    }
+    this.overlayRef?.dispose();
     this.overlayRef = null;
   }
 
   private getOverlayConfig(): OverlayConfig {
     return new OverlayConfig({
-      disposeOnNavigation: true,
+      disposeOnNavigation: this.nzCloseOnNavigation,
       positionStrategy: this.overlay.position().global(),
       scrollStrategy: this.overlay.scrollStrategies.block()
     });