Skip to content
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.

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

Drawer抽屉嵌套组件(内含抽屉)多重打开第一层会遮挡最后打开的抽屉弹层 #6381

Closed
232650413 opened this issue Jan 26, 2021 · 7 comments · Fixed by #6581

Comments

@232650413
Copy link

Reproduction link

https://stackblitz.com/edit/angular-giqmv2?file=src/app/child/child.html

Steps to reproduce

当前模块组件中打开抽屉(Drawer),其内容调用另一个模块组件,此模块组件也含有抽屉Drawer,打开这个抽屉会被第一次打开的抽屉所遮挡。需要在“第一模块”中设置抽屉nzZIndex ,如:999,方可。

What is expected?

默认无需设置nzZIndex。

What is actually happening?

当前层级问题,只能设置nzZIndex处理。

Environment Info
ng-zorro-antd 11.1.0
Browser Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36

原9.3版本是不用设置(升级后出现这个问题)。

@zorro-bot
Copy link

zorro-bot bot commented Jan 26, 2021

Translation of this issue:

Drawer Drawers Nested Components (including drawers) Multiple open first floors cover the last open drawer structure

reproduction link

[https://stackblitz.com/edit/angular-giqmv2?file=src/app/child/child.html](https://stackblitz.com/edit/angular-giqmv2?file=src/app/child/ Child.html)

steps to reproduce

Drawer (DRAWER) is opened in the current module component, and its content calls another module component, which also contains a drawer Drawer, which opens the drawer to be blocked by the first open drawer. The drawer Nzzindex needs to be set in the "First Module", such as: 999.

What is expected?

No need to set NZZIndex by default.

What is actually happens?

The current hierarchy problem can only be set to NZZIndex processing.

ENVIRONMENT INFO
Ng-Zorro-ANTD 11.1.0
Browser Mozilla / 5.0 (Windows NT 10.0; Win64; x64) AppleWebkit / 537.36 (KHTML, LIKE Gecko) Chrome / 87.0.4280.88 Safari / 537.36

The original version 9.3 is not set (this problem after the upgrade).

@232650413 232650413 changed the title Drawer抽屉嵌套组件(内含抽屉)多重打开第一层会覆盖最后打开的抽屉弹层 Drawer抽屉嵌套组件(内含抽屉)多重打开第一层会遮挡最后打开的抽屉弹层 Jan 26, 2021
@chongqiangchen
Copy link
Contributor

chongqiangchen commented Jan 30, 2021

此BUG我理解应该是因为使用<ng-container *nzDrawerContent></ng-container>插入内容的方案造成的问题,如果直接使用<ng-content></ng-content>方案不会出现层级问题。

有个额外的问题:6085 中提到:

Usage <ng-content></ng-content> is deprecated, use <ng-template nzDrawerContent></ng-template> to declare the contents of the drawer.

为何这么说?

@232650413
Copy link
Author

11.2版本还没修复...多drawer需定义层级。

@232650413
Copy link
Author

@hsuanxyz

@232650413
Copy link
Author

232650413 commented Apr 1, 2021

还有,若路由变更,跳转别的页面,上个页面的抽屉无法自动关闭,再点击也无法关闭。
下拉select菜单的悬浮菜单之类也一样,不太好demo,不知道大家又遇到没?咋处理的

@xiejay97
Copy link
Contributor

xiejay97 commented Apr 5, 2021

还有,若路由变更,跳转别的页面,上个页面的抽屉无法自动关闭,再点击也无法关闭。
下拉select菜单的悬浮菜单之类也一样,不太好demo,不知道大家又遇到没?咋处理的

可以试试创建一个服务存储抽屉这种组件的实例,监听相应路由事件调用实例的close方法

@232650413
Copy link
Author

抽屉

那样貌似麻烦了

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
4 participants