Ng-bootstrap Popover交互优化：移入内容区需保持打开状态

要实现悬停图标打开Popover、移入Popover内容区保持打开、移出后自动关闭的效果，需要手动控制Popover的显示/关闭逻辑，结合延迟处理避免用户移向内容区时Popover提前消失。具体调整如下：

1. 修改组件TS代码 #

在popover.component.ts中添加控制逻辑：

import { Component, ViewChild } from '@angular/core';
import { NgbPopover } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-popover',
  templateUrl: './popover.component.html',
  styleUrls: ['./popover.component.css']
})
export class PopoverComponent {
  @ViewChild('popover') popover!: NgbPopover;
  private closeTimeout?: number;

  openPopover() {
    // 清除之前的关闭延迟，确保Popover保持打开
    clearTimeout(this.closeTimeout);
    this.popover.open();
  }

  closePopover() {
    // 设置延迟关闭，给用户足够时间从图标移到Popover内容区
    this.closeTimeout = window.setTimeout(() => {
      this.popover.close();
    }, 300);
  }
}

2. 更新模板代码 #

调整popover.component.html，修改触发方式并添加鼠标事件监听：

<div>
  <ng-template #popContent>
    <!-- 给Popover内容包裹一层div，监听鼠标进出事件 -->
    <div (mouseenter)="openPopover()" (mouseleave)="closePopover()">
      <ng-content></ng-content>
    </div>
  </ng-template>

  <span
    #popover="ngbPopover"
    class="popover popover-icon ms-2"
    placement="right auto"
    [animation]="true"
    triggers="manual" <!-- 改为手动触发，放弃默认的mouseenter:mouseleave -->
    [ngbPopover]="popContent"
    data-test="popOver"
    autoClose="outside" <!-- 保持点击外部关闭的行为 -->
    [openDelay]="500"
    (mouseenter)="openPopover()"
    (mouseleave)="closePopover()"
  >
    ?
  </span>
</div>

逻辑说明 #

• 手动触发（triggers="manual"）：禁用Popover默认的自动关闭逻辑，完全通过代码控制显示/隐藏。
• 延迟关闭：当鼠标离开图标或Popover内容区时，设置300毫秒延迟再关闭。如果用户在延迟内移入目标区域（图标→Popover，或Popover→图标），会清除延迟并保持Popover打开。
• autoClose="outside"：保留点击Popover外部区域时自动关闭的行为，同时切换其他Popover时，当前Popover会因为点击外部而关闭，解决切换不自动关闭的问题。

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