如何让我的 ngDropdown 菜单在悬停而不是单击时工作？

Question

我正在使用带有 Angular Bootstrap 的模板。当我用鼠标悬停在下拉事件上而不是单击它时，我试图调用下拉事件。我该如何调用这个事件？

<div ngbDropdown class="d-inline-block dropdown">
    <a class="navbar-brand" id="dropdownBasic1" href="#basiccomponents" ngbDropdownToggle>Learning</a>
        <div ngbDropdownMenu aria-labelledby="dropdownBasic1" class="dropdown-primary">
            <a class="dropdown-item">Learning Outcomes</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item">Learning Plan</a>
        </div>
    </div>

Answer 1

在 html 模板中为您的 ngbDropdown 创建一个变量（无论名称是什么）：

#drop

指定打字稿类型 ngbDropdown

#drop="ngbDropdown"

在 ngbDropdown 上的事件 mouseenter 调用该方法：

<li ngbDropdown #drop="ngbDropdown" (mouseenter)='over(drop)'>  

在 ngbDropdownMenu 上的事件 mouseleave 调用该方法：

<div ngbDropdownMenu (mouseleave)='out(drop)'>

  over(drop:NgbDropdown){
    drop.open()
  }
  out(drop:NgbDropdown){
    drop.close()
  }

    <li class="nav-item" ngbDropdown #drop="ngbDropdown" display="dynamic" placement="bottom-end" (mouseenter)='over(drop)' (mouseleave)='out(drop)'>
      <a class="nav-link" tabindex="0" ngbDropdownToggle id="navbarDropdown3" role="button">
        Dynamic
      </a>
      <div ngbDropdownMenu aria-labelledby="navbarDropdown3" class="dropdown-menu">
        <a ngbDropdownItem href="#" (click)="$event.preventDefault()">Action</a>
        <a ngbDropdownItem href="#" (click)="$event.preventDefault()">Another action</a>
        <a ngbDropdownItem href="#" (click)="$event.preventDefault()">Something else here</a>
      </div>
    </li>

您可以使用 mouseover 代替 mouseenter，但 mouseenter 更好。
您可以使用 mouseout 代替 mouseleave，但 mouseleave 更好。

Answer 2

dropdown API 有一个

toggle()

方法，以及显式

open()

和

close()

。通过绑定到

(mouseenter)

和

(mouseleave)

事件来在悬停时调用它们。

以下是基础知识，这不是完整的示例。您需要提供下拉菜单的参考。

<div ngbDropdown class="d-inline-block dropdown" (mouseenter)="onHover($event)" (mouseleave)="onHover($event)">
  ...
<div>

onHover(event): void {
  this.myDropDown.toggle();
}

Answer 3

尝试使用带有 mouseleave 和 mouseenter 事件的角度材料。

参考：https://www.thetopsites.net/article/54301126.shtml#:~:text=To%20hide%20menu%2C%20add%20mouseleave%20event%20for%20a%20menu.&text=Demos%20 %3E%20Menu%2C%20Now%20on%20点击，库%20到%20构造%20UI%2FUX。 演示：https://stackblitz.com/edit/example-angular-material-toolbar-menu-wrut3v