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

【问题标题】：How to close the Ng-Zorro menu after user click on menu-item or outside the menu?用户单击菜单项或菜单外如何关闭 Ng-Zorro 菜单？
【发布时间】：2019-12-18 14:27:19
【问题描述】：

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

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

【问题讨论】：

标签： angular ng-zorro-antd

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

【讨论】：