如何在鼠标悬停时打开Angular 2的ng-bootstrap导航栏ngbDropdown？

当然可以实现！ng-bootstrap的ngbDropdown组件默认是点击触发的，但我们可以通过Angular的事件绑定或者自定义指令来实现鼠标悬停打开的效果，下面给你两种实用的方案：

方案一：直接在模板中绑定鼠标事件 #

这种方法适合单个dropdown的场景，直接在dropdown容器上绑定mouseenter和mouseleave事件，调用dropdown的控制方法：

模板代码 #

<div ngbDropdown #myDropdown="ngbDropdown" 
     (mouseenter)="myDropdown.open()" 
     (mouseleave)="myDropdown.close()">
  <button class="btn btn-secondary" ngbDropdownToggle>
    悬停打开我
  </button>
  <div ngbDropdownMenu>
    <button ngbDropdownItem>选项1</button>
    <button ngbDropdownItem>选项2</button>
    <button ngbDropdownItem>选项3</button>
  </div>
</div>

这里通过模板引用变量#myDropdown="ngbDropdown"获取到dropdown实例，然后在鼠标进入时调用open()方法，离开时调用close()方法，简单直接。

方案二：自定义可复用指令 #

如果你的项目中有多个dropdown需要悬停触发，自定义一个指令会更高效，避免重复代码：

1. 创建悬停触发指令 #

import { Directive, HostListener } from '@angular/core';
import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap';

@Directive({
  selector: '[appDropdownHover]'
})
export class DropdownHoverDirective {
  constructor(private dropdown: NgbDropdown) {}

  @HostListener('mouseenter') onMouseEnter() {
    this.dropdown.open();
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.dropdown.close();
  }
}

2. 在模块中声明指令 #

记得把这个指令添加到你的Angular模块的declarations数组里，这样才能在模板中使用。

3. 在模板中使用指令 #

<div ngbDropdown appDropdownHover>
  <button class="btn btn-secondary" ngbDropdownToggle>
    悬停打开我（指令版）
  </button>
  <div ngbDropdownMenu>
    <button ngbDropdownItem>选项A</button>
    <button ngbDropdownItem>选项B</button>
    <button ngbDropdownItem>选项C</button>
  </div>
</div>

额外注意事项 #

• 如果你需要考虑移动端体验，悬停在触摸设备上不太友好，可以通过媒体查询或者Angular的BreakpointObserver来判断设备类型，只在桌面端启用悬停触发。
• 要是遇到dropdown菜单在鼠标离开容器前就消失的问题，可以调整菜单的margin或者给容器加一点padding，让鼠标移动到菜单的路径更顺畅。

内容的提问来源于stack exchange，提问作者Todd Smith