如何使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

下拉式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 2

在html模板中为ngbDrop创建一个变量(无论名称如何(：
#drop

指定typescript类型ngbDrop
#drop="ngbDropdown"

在ngbDropdown上的事件鼠标悬停时调用方法：

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

在ngbDropdownMenu上的事件mouseout调用方法：

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

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

<li class="nav-item" ngbDropdown #drop="ngbDropdown" display="dynamic" placement="bottom-end" (mouseover)='over(drop)' (mouseout)='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>

Answer 3

尝试将有角度的材质与mouseleave和mouseenter evenets一起使用。

参考：https://www.thetopsites.net/article/54301126.shtml#:~：text=到%20隐藏%20菜单%2C%20添加%20鼠标离开%20事件%20到%20菜单&text=演示%20%3E%20Menu%2C%20Now%20单击%20，库%20到%20构造%20UI%2FUX。演示：https://stackblitz.com/edit/example-angular-material-toolbar-menu-wrut3v