如何在mat-autocomplete中触发鼠标移出事件？解决mouseleave失效问题

直接在<mat-autocomplete>标签上绑定mouseleave事件无效，因为组件的宿主元素和实际弹出的下拉面板是分离的——面板是由Angular CDK Overlay生成的独立DOM元素，不属于<mat-autocomplete>标签的DOM结构。以下是可行的实现方案：

方案一：通过ViewChild获取面板元素绑定事件 #

1. 组件代码（TS） #

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { MatAutocomplete } from '@angular/material/autocomplete';

@Component({
  // 你的组件元数据（selector、templateUrl等）
})
export class YourComponent implements AfterViewInit {
  @ViewChild(MatAutocomplete) autocomplete!: MatAutocomplete;

  ngAfterViewInit(): void {
    // 给面板元素绑定mouseleave事件
    this.autocomplete.panel?.addEventListener('mouseleave', () => {
      this.autocomplete.closePanel();
    });
  }

  // 你的其他业务代码（比如sourceFiltered$、optionTrackByFn等）
}

2. 模板代码（HTML） #

移除<mat-autocomplete>上的(mouseleave)绑定，保持原有结构即可：

<mat-autocomplete autoActiveFirstOption >
  <mat-option  *ngFor="let tag of this.sourceFiltered$ | async; trackBy: optionTrackByFn" [value]="tag"> 
    <div class="row">
      <div class="tag">
        <div class="tag-name mat-body-2">{{tag.name}}</div>
        <div class="tag-category mat-caption">{{tag.category}}</div>
      </div>
    </div>
  </mat-option>
</mat-autocomplete>

方案二：结合Overlay容器监听鼠标事件 #

如果方案一遇到兼容性问题，可以直接监听Overlay容器的鼠标离开事件：

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { MatAutocomplete } from '@angular/material/autocomplete';
import { OverlayContainer } from '@angular/cdk/overlay';

@Component({
  // 组件元数据
})
export class YourComponent implements AfterViewInit {
  @ViewChild(MatAutocomplete) autocomplete!: MatAutocomplete;

  constructor(private overlayContainer: OverlayContainer) {}

  ngAfterViewInit(): void {
    const panelElement = this.autocomplete.panel;
    if (panelElement) {
      const overlayContainerElement = this.overlayContainer.getContainerElement();
      overlayContainerElement.addEventListener('mouseleave', (event) => {
        // 判断鼠标是否离开的是当前面板
        if (event.target === panelElement || panelElement.contains(event.target as Node)) {
          this.autocomplete.closePanel();
        }
      });
    }
  }
}

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