Angular 13中ngSelect选项hover事件调用实现方案咨询

完全可行，直接给<ng-option>绑定鼠标悬停事件即可，具体实现步骤如下：

1. 修改模板中的<ng-option>标签 #

在循环生成的<ng-option>上添加(mouseenter)事件（若需鼠标在选项内移动时持续触发，可改用(mouseover)），并传递当前选项的data对象：

<div class="col-sm-6 col-md-3 col-lg-3 col-xl-2 col-12 custom-select">
  <div class="form-group form-focus select-focus">
    <ng-select [(ngModel)]="employeeCode" (change)="onLeaveFilterChange()" [allowClear]="false"
      [placeholder]="'-- Select --'" dropdownPosition="bottom" class="form-control">
      <ng-option [value]="'null'">-- Select --</ng-option>
      <!-- 绑定鼠标悬停事件并传递当前员工数据 -->
      <ng-option *ngFor="let data of totalLeavedEmployeeList" [value]="data.empCode" (mouseenter)="onOptionHover(data)">
        {{ data?.empCode }} - {{ data?.empName }}
      </ng-option>
    </ng-select>
    <label class="focus-label">Employee</label>
  </div>
</div>

2. 在TS文件中定义事件处理函数 #

在组件的.ts文件里实现onOptionHover方法，编写悬停触发的业务逻辑：

export class YourComponent {
  employeeCode: any;
  totalLeavedEmployeeList: any[] = []; // 你的员工列表数据

  // 原有change事件逻辑
  onLeaveFilterChange() {
    // ...你的业务代码
  }

  // 新增的悬停事件处理函数
  onOptionHover(employeeData: any) {
    // 这里编写悬停时要执行的逻辑，比如打印信息、加载员工详情等
    console.log('鼠标悬停员工:', employeeData);
    // 示例：调用自定义业务方法
    // this.fetchEmployeeDetail(employeeData.empCode);
  }
}

补充说明 #

• mouseenter仅在鼠标首次进入选项元素时触发一次，适合单次触发的场景；mouseover会在鼠标进入选项及子元素时持续触发，按需选择即可。
• <ng-option>最终会渲染为普通DOM元素，因此所有标准DOM鼠标事件都可以直接绑定使用，无需额外配置。

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