Angular Material Select模块如何获取面板打开前的事件？

我之前在项目里也碰到过一模一样的需求——openedChange确实只能在面板打开后触发，完全满足不了“打开前处理”的场景，而且浮动标签点击时常规的click事件失效的坑也踩过。分享两个亲测有效的方案给你：

方案一：监听前置触发事件（快速实现） #

如果只是在单个组件里临时解决，可以直接监听mousedown和键盘事件，因为这些事件会在面板打开前触发，而且能覆盖点击浮动标签的场景：

import { Component, ViewChild, HostListener } from '@angular/core';
import { MatSelect } from '@angular/material/select';

@Component({
  // 组件元数据（根据你的项目调整）
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  @ViewChild(MatSelect) select!: MatSelect;

  // 监听鼠标按下事件（比click更早触发，能捕获浮动标签的点击）
  @HostListener('mousedown', ['$event'])
  onSelectTriggerMousedown(event: MouseEvent) {
    const target = event.target as HTMLElement;
    // 判断点击的是select触发区或者浮动标签
    if (target.closest('.mat-select-trigger') || target.closest('.mat-form-field-label')) {
      // 这里写你需要的前置处理逻辑
      console.log('面板即将打开，执行前置操作');
      // 如果需要阻止默认打开行为，可调用event.preventDefault()
    }
  }

  // 处理键盘触发的情况（空格/回车打开面板）
  @HostListener('keydown.enter', ['$event'])
  @HostListener('keydown.space', ['$event'])
  onSelectKeydown(event: KeyboardEvent) {
    if (this.select.focused) {
      // 执行前置处理
      console.log('键盘触发面板打开，执行前置操作');
    }
  }
}

方案二：自定义指令拦截open方法（优雅复用） #

如果多个组件都需要这个功能，推荐写一个可复用的指令，直接拦截MatSelect的open()方法——因为不管是点击、键盘还是其他方式触发打开，最终都会调用这个公开方法：

import { Directive, Host, Self } from '@angular/core';
import { MatSelect } from '@angular/material/select';

@Directive({
  selector: '[appPreSelectOpen]' // 自定义指令选择器
})
export class PreSelectOpenDirective {
  constructor(@Host() @Self() private select: MatSelect) {
    // 保存原始的open方法引用
    const originalOpen = this.select.open.bind(this.select);
    
    // 重写open方法
    this.select.open = () => {
      // 👇 这里写你的前置处理逻辑
      console.log('MatSelect面板打开前的通用前置操作');
      
      // 调用原始的open方法，确保面板正常打开
      originalOpen();
    };
  }
}

然后在模板里直接给mat-select加上这个指令即可：

<mat-form-field appearance="fill">
  <mat-label>选择选项</mat-label>
  <mat-select appPreSelectOpen [(value)]="selectedValue">
    <mat-option value="option1">选项1</mat-option>
    <mat-option value="option2">选项2</mat-option>
  </mat-select>
</mat-form-field>

为什么浮动标签点击时普通click事件无效？ #

简单说，当标签处于浮动状态时，它的DOM层级和点击事件的传播路径会被MatFormField的样式和内部事件处理干扰，常规的click事件可能无法正确绑定到触发打开的逻辑上。而mousedown事件触发时机更早，或者直接拦截open()方法则能覆盖所有触发场景，不会受UI状态影响。

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