From 7101782cd14bf1d1d0fa875d5538e8ff0eee5633 Mon Sep 17 00:00:00 2001 From: Hsuan Lee Date: Mon, 11 May 2020 20:37:23 +0800 Subject: [PATCH] fix(module: auto-complete, drawer): cannot reopen when reuse route snapshots(#5165) close #5142 --- .../autocomplete-trigger.directive.ts | 13 ++++++++++--- components/core/config/config.ts | 1 + components/drawer/doc/index.en-US.md | 2 ++ components/drawer/doc/index.zh-CN.md | 2 ++ components/drawer/drawer-options.ts | 1 + components/drawer/drawer.component.ts | 15 +++++++++++---- 6 files changed, 27 insertions(+), 7 deletions(-) diff --git a/components/auto-complete/autocomplete-trigger.directive.ts b/components/auto-complete/autocomplete-trigger.directive.ts index db6ccc717e2..153c1395d0a 100644 --- a/components/auto-complete/autocomplete-trigger.directive.ts +++ b/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(); 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; } diff --git a/components/core/config/config.ts b/components/core/config/config.ts index 539e12bed74..fa0414c29b2 100644 --- a/components/core/config/config.ts +++ b/components/core/config/config.ts @@ -143,6 +143,7 @@ export interface DescriptionsConfig { export interface DrawerConfig { nzMask?: boolean; nzMaskClosable?: boolean; + nzCloseOnNavigation?: boolean; } export interface EmptyConfig { diff --git a/components/drawer/doc/index.en-US.md b/components/drawer/doc/index.en-US.md index 155e9cdfc2a..473d426818d 100755 --- a/components/drawer/doc/index.en-US.md +++ b/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` | - | | 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` | `{}` | diff --git a/components/drawer/doc/index.zh-CN.md b/components/drawer/doc/index.zh-CN.md index 1453adfaba4..c191a6778f8 100755 --- a/components/drawer/doc/index.zh-CN.md +++ b/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` | `{}` | diff --git a/components/drawer/drawer-options.ts b/components/drawer/drawer-options.ts index 6102e087508..460f5668ee6 100644 --- a/components/drawer/drawer-options.ts +++ b/components/drawer/drawer-options.ts @@ -15,6 +15,7 @@ export type NzDrawerPlacement = 'left' | 'right' | 'top' | 'bottom'; export interface NzDrawerOptionsOfComponent { nzClosable?: boolean; nzMaskClosable?: boolean; + nzCloseOnNavigation?: boolean; nzMask?: boolean; nzKeyboard?: boolean; nzNoAnimation?: boolean; diff --git a/components/drawer/drawer.component.ts b/components/drawer/drawer.component.ts index 4ebec24da07..1d6154a3490 100644 --- a/components/drawer/drawer.component.ts +++ b/components/drawer/drawer.component.ts @@ -103,11 +103,13 @@ export class NzDrawerComponent exte static ngAcceptInputType_nzMask: BooleanInput; static ngAcceptInputType_nzNoAnimation: BooleanInput; static ngAcceptInputType_nzKeyboard: BooleanInput; + static ngAcceptInputType_nzCloseOnNavigation: BooleanInput; @Input() nzContent!: TemplateRef<{ $implicit: D; drawerRef: NzDrawerRef }> | Type; @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 exte } open(): void { + this.attachOverlay(); this.isOpen = true; this.overlayKeyboardDispatcher.add(this.overlayRef!); this.updateOverlayStyle(); @@ -341,19 +344,23 @@ export class NzDrawerComponent 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() });