时间戳

首页 > 解决方案 > 如何使我的 ngDropdown 菜单在悬停而不是单击时工作？

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

问题描述

我正在使用带有 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>

标签： angularbootstrap-4

解决方案

下拉 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();
}

推荐阅读