Skip to content

feat(module:dropdown): support nzDestroyOnHidden #9580

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
WwwHhhYran wants to merge 1 commit into
base: master
Choose a base branch
from
+64 −0
Draft

feat(module:dropdown): support nzDestroyOnHidden #9580

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions components/dropdown/doc/index.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ If there are too many operations to display, you can wrap them in a `Dropdown`.
| `[nzOverlayStyle]` | Style of the dropdown root element | `object` | - |
| `(nzVisibleChange)` | a callback function takes an argument: `nzVisible`, is executed when the visible state is changed | `EventEmitter<boolean>` | - |
| `[nzArrow]` | Whether the dropdown arrow should be visible | `boolean` | `false` | 20.2.0 |
| `[nzDestroyOnHidden]` | Whether destroy dropdown when hidden | `boolean` | `false` | 21.0.0 |

You should use [nz-menu](/components/menu/en) in `nz-dropdown`. The menu items and dividers are also available by using `nz-menu-item` and `nz-menu-divider`.

Expand Down
1 change: 1 addition & 0 deletions components/dropdown/doc/index.zh-CN.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ description: 向下弹出的列表。
| `[nzOverlayStyle]` | 下拉根元素的样式 | `object` | - |
| `(nzVisibleChange)` | 菜单显示状态改变时调用，参数为 nzVisible | `EventEmitter<boolean>` | - |
| `[nzArrow]` | 下拉框箭头是否显示 | `boolean` | `false` | 20.2.0 |
| `[nzDestroyOnHidden]` | 关闭后是否销毁 Dropdown | `boolean` | `false` | 21.0.0 |

菜单使用 [nz-menu](/components/menu/zh)，还包括菜单项 `[nz-menu-item]`，分割线 `[nz-menu-divider]`。

Expand Down
57 changes: 57 additions & 0 deletions components/dropdown/dropdown.directive.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@

import { ESCAPE } from '@angular/cdk/keycodes';
import { OverlayContainer } from '@angular/cdk/overlay';
import { TemplatePortal } from '@angular/cdk/portal';
import { Component } from '@angular/core';
import { ComponentFixture, fakeAsync, inject, TestBed, tick } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
Expand Down Expand Up @@ -211,6 +212,60 @@ describe('dropdown', () => {
}).not.toThrowError();
}));

describe('should nzDestroyOnHidden work', () => {
it('should not recreate portal when nzDestroyOnHidden is false', fakeAsync(() => {
const fixture = TestBed.createComponent(NzTestDropdownComponent);
fixture.componentInstance.destroyOnHidden = false;
fixture.detectChanges();
expect(() => {
const dropdownElement = fixture.debugElement.query(By.directive(NzDropdownDirective)).nativeElement;
dispatchFakeEvent(dropdownElement, 'mouseenter');
fixture.detectChanges();
tick(1000);
fixture.detectChanges();
const portal_pre = fixture.debugElement
.query(By.directive(NzDropdownDirective))
.injector.get(NzDropdownDirective)['portal'];
expect(portal_pre instanceof TemplatePortal).toBe(true);
dispatchKeyboardEvent(document.body, 'keydown', ESCAPE);
tick(1000);
fixture.detectChanges();
dispatchFakeEvent(dropdownElement, 'mouseenter');
tick(1000);
fixture.detectChanges();
expect(
fixture.debugElement.query(By.directive(NzDropdownDirective)).injector.get(NzDropdownDirective)['portal']
).toBe(portal_pre);
}).not.toThrowError();
}));

it('should recreate portal when nzDestroyOnHidden is true', fakeAsync(() => {
const fixture = TestBed.createComponent(NzTestDropdownComponent);
fixture.componentInstance.destroyOnHidden = true;
fixture.detectChanges();
expect(() => {
const dropdownElement = fixture.debugElement.query(By.directive(NzDropdownDirective)).nativeElement;
dispatchFakeEvent(dropdownElement, 'mouseenter');
fixture.detectChanges();
tick(1000);
fixture.detectChanges();
const portal_pre = fixture.debugElement
.query(By.directive(NzDropdownDirective))
.injector.get(NzDropdownDirective)['portal'];
expect(portal_pre instanceof TemplatePortal).toBeTruthy();
dispatchKeyboardEvent(document.body, 'keydown', ESCAPE);
tick(1000);
fixture.detectChanges();
dispatchFakeEvent(dropdownElement, 'mouseenter');
tick(1000);
fixture.detectChanges();
expect(
fixture.debugElement.query(By.directive(NzDropdownDirective)).injector.get(NzDropdownDirective)['portal']
).not.toBe(portal_pre);
}).not.toThrowError();
}));
});

it('should nzVisible & nzClickHide work', fakeAsync(() => {
const fixture = TestBed.createComponent(NzTestDropdownVisibleComponent);
fixture.detectChanges();
Expand Down Expand Up @@ -256,6 +311,7 @@ describe('dropdown', () => {
[nzBackdrop]="backdrop"
[nzOverlayClassName]="className"
[nzOverlayStyle]="overlayStyle"
[nzDestroyOnHidden]="destroyOnHidden"
>
Trigger
</a>
Expand All @@ -275,6 +331,7 @@ export class NzTestDropdownComponent {
disabled = false;
className = 'custom-class';
overlayStyle = { color: '#000' };
destroyOnHidden = false;
}

@Component({
Expand Down
5 changes: 5 additions & 0 deletions components/dropdown/dropdown.directive.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,6 +93,8 @@ export class NzDropdownDirective implements AfterViewInit, OnChanges {
@Input() nzOverlayClassName: string = '';
@Input() nzOverlayStyle: IndexableObject = {};
@Input() nzPlacement: NzPlacementType = 'bottomLeft';
// Whether destroy dropdown when hidden
@Input() nzDestroyOnHidden: boolean = false;
@Output() readonly nzVisibleChange = new EventEmitter<boolean>();

constructor() {
Expand Down Expand Up @@ -229,6 +231,9 @@ export class NzDropdownDirective implements AfterViewInit, OnChanges {
if (event.toState === 'void') {
this.overlayRef?.dispose();
this.overlayRef = null;
if (this.nzDestroyOnHidden) {
Copy link
Collaborator

@Laffery Laffery Dec 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If the animation is disabled by the user, does that mean the nzDestroyOnHide will not take effect?

Copy link
Member Author

@WwwHhhYran WwwHhhYran Dec 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

理论上及时用户关闭了动画，但依然会触发 Angular 动画的 done 事件，执行这个订阅流？不过写在这里确实不好，如果想重新 new 一个 portal 应该写成下面这样更好：

if (!this.portal || this.portal.templateRef !== this.nzDropdownMenu!.templateRef || this.nzDestroyOnHidden) {
    this.portal = new TemplatePortal(this.nzDropdownMenu!.templateRef, this.viewContainerRef);
}

但我现在发现一个问题，即使这里 new 了一个新的 portal，但实际上并没有销毁 dropdown menu 🤔，下一次打开依然是上一次的。这个 PR 我后续再改下

Copy link
Member Author

@WwwHhhYran WwwHhhYran Dec 4, 2025 •
edited by Laffery
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nzDropdownMenu 中展示的组件是通过 <ng-content> 投影过来的，其生命周期的管理权应该在它原始声明的位置，我们这里对 portal 和 overlayRef 的重建操作无法实现 ng-content 的重建，所以渲染的始终是 ng-content 中最开始的那个实例。

不知道是否有其他方法来支撑 nzDestroyOnHidden，我暂时还没有思路，如果没有方法的话，我可能会关闭这个 PR ☹️

Copy link
Collaborator

@Laffery Laffery Dec 5, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这一点我觉得是我们和 antd react 最大的差异。
antd dropdown 组件是通过传入 menu props，在 doprdown 组件内部渲染 menu，dropdown 能完整控制 menu 的生命周期；
而 zorro 是将 menu ref 传给 dropdown，即使 dropdown 能销毁 menu，但无法重新实例化 menu。

angular 本身我理解也不具备解决这类问题的方法，如果要支持，目前我觉得只有通过 menu props
WDYT cc @HyperLife1119

Copy link
Collaborator

@HyperLife1119 HyperLife1119 Dec 5, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

menu props 的方式其实并不适合 Angular，因为 antd 的 menu props 里可以直接传递 jsx，而 angular 只能传递 ng-template，用法会很繁琐

我理想中的 dropdown 组件应该是这样的：

<a [nzDropdownTriggerFor]="menuTmpl">Hover me</a>

<ng-template #menuTmpl>
  <nz-dropdown-menu>
    <ul nz-menu nzSelectable>
      <li nz-menu-item>1st menu item</li>
    </ul>
  </nz-dropdown-menu>
</ng-template>

优点：

  • dropdown 现在具有 menu 的渲染控制权
  • nz-dropdown-menu 定义在 ng-template 中，不会影响 DOM 结构，现在的方式是 nz-dropdown-menu 在渲染后自动调用removeChild(HostElement)来移除 DOM 节点（我发现过去 nz popover / tooltip 都是这么干的，很不干净）
  • 整个 menu 都在模板中，自定义很方便，不存在 menu props 里传递 ng-template 的问题

或者参考一下 angular aria menu：https://angular.dev/guide/aria/menu

Copy link
Member Author

@WwwHhhYran WwwHhhYran Dec 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

确实是一个好方法👍！不过如果这样实现的话，dropdown 现有的实现方式可能会有较大的变动。例如：

nz-dropdown-menu 的 template 不再需要使用 <ng-template>，直接渲染为：

<div class="...">
  <ng-content></ng-content>
</div>

包括 nzPlacement, nzArrow 等属性是否需要迁移到 nz-dropdown-menu 组件上，等等。

这个改动会影响到现有用户的使用 🤔

Copy link
Collaborator

@HyperLife1119 HyperLife1119 Dec 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

如果 schematics 自动迁移实现成本过高，可以将旧的 dropdown 设置为 DropdownLegacyModule，像之前 NzInputNumberLegacyModule 那样，让用户自己在未来的几个版本内逐步手动迁移到新的 DropdownModule 🥲

Copy link
Collaborator

@Laffery Laffery Dec 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这个大版本估计来不及搞了

Copy link
Member Author

@WwwHhhYran WwwHhhYran Dec 8, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

我先转为 draft，后续考虑进行重构

this.portal = undefined;
}
}
});
}
Expand Down