当用户点击离开Angular 2+时关闭菜单

Question

我的导航栏中有一个下拉菜单，我通过在单击时添加show 类来打开和关闭它。

这可行，但需要用户再次单击按钮才能关闭菜单。作为一种半解决方案，我现在监听路由器更改并在路由更改时关闭菜单。

但是，如果单击菜单按钮以外的任何内容，我希望菜单关闭。让用户可以通过点击背景摆脱菜单。我如何做到这一点？

<button class="btn btn-link nav-link dropdown-toggle" (click)="showDropdown=!showDropdown" id="navbarDropdown" role="button" >

<div class="dropdown-menu" [ngClass]="{'show': showDropdown}">

请不要使用 jquery 提供解决方案。我没有在这个项目中使用它。

Answer 1

您可以在下拉菜单中监听 mouseout 事件并将变量 showDropdown 设置为 false。我的意思是：

<button class="btn btn-link nav-link dropdown-toggle" (click)="showDropdown=!showDropdown" id="navbarDropdown" role="button">

<div class="dropdown-menu" [ngClass]="{'show': showDropdown}" (mouseout)="showDropdown = false"> <!-- This --!>

希望能帮到你！！！