如何监听PrimeNG Dropdown即将打开事件并访问OverlayOptions的OnBeforeShow回调？

组件类实现方式 #

通过ViewChild获取Dropdown实例后，在组件初始化完成的钩子中，为overlayOptions的onBeforeShow赋值回调函数即可，注意保留原有配置避免覆盖：

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { Dropdown } from 'primeng/dropdown';

@Component({
  // 组件元数据（比如selector、templateUrl等）
})
export class YourComponent implements AfterViewInit {
  @ViewChild('dropdown') dropdown!: Dropdown;

  ngAfterViewInit(): void {
    // 合并原有overlay配置，添加onBeforeShow回调
    this.dropdown.overlayOptions = {
      ...this.dropdown.overlayOptions,
      onBeforeShow: (event) => {
        this.doSomething(event);
      }
    };
  }

  doSomething(event: any): void {
    // 浮层即将打开时执行的逻辑
    console.log('浮层即将打开', event);
  }
}

模板侧的说明 #

PrimeNG原生Dropdown组件并未直接暴露(onBeforeShow)输出事件，无法直接在模板中通过(onBeforeShow)="doSomething()"绑定。如果想要贴近模板触发的体验，可通过上述组件类的方式绑定回调，再将逻辑映射到组件方法中即可。

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