如何在用户单击菜单项或菜单外后关闭 Ng-Zorro 菜单？

Question

https://ng.ant.design/components/menu/en#components-menu-demo-horizontal

Answer 1

你应该用 ngIf 包装它并在上面设置一个状态。如果用户单击一个菜单项，您只需将变量设置为 false，这样菜单就会被隐藏。菜单外的点击也是如此，你只需要一个事件监听器。像这样：<div *ngIf="show == true">。然后将显示设置为 false，如果用户单击某个项目，或者在菜单之外。

Answer 2

这个属性 nzInlineCollapsed负责显示和隐藏菜单，所以如果你用这个nzInlineCollapsed绑定菜单点击事件它就会隐藏如果属性与之绑定的是错误的。这里 isCollapsed 与 nzInlineCollapsed 绑定，因此在单击按钮时 isCollapsed 变为 false 然后您的菜单将隐藏。

<ul nz-menu nzMode="inline" [nzInlineCollapsed]="isCollapsed">

如何在用户单击菜单项或菜单外后关闭 Ng-Zorro 菜单？

How to close the Ng-Zorro menu after user click on menu-item or outside the menu?

angular

ng-zorro-antd