如何在Angular组件内判断父组件是否绑定click事件？

推荐方案：使用自定义Output事件 #

这种方法符合Angular设计规范，稳定可靠，同时兼容父组件绑定原生click事件的写法。

在组件内定义自定义的click输出事件，通过其observers数组长度判断是否有父组件订阅：

import { Component, Output, HostListener, EventEmitter } from '@angular/core';

@Component({
  selector: 'my-component',
  templateUrl: './my-component.component.html',
})
export class MyComponent {
  @Output() click = new EventEmitter<MouseEvent>();

  // 通过getter直接获取判断结果
  get hostHasClickListener(): boolean {
    return this.click.observers.length > 0;
  }

  // 可选：将宿主原生click事件转发到自定义Output，兼容父组件绑定原生click的写法
  @HostListener('click', ['$event'])
  private onHostClick(event: MouseEvent) {
    this.click.emit(event);
  }
}

• 场景A（父组件绑定事件）：

  <my-component (click)="onClick()"></my-component>
  

  此时hostHasClickListener返回true。

• 场景B（父组件未绑定事件）：

  <my-component></my-component>
  

  此时hostHasClickListener返回false。

可选方案（不推荐）：依赖Angular内部实现 #

如果必须检测原生DOM事件的绑定（不使用自定义Output），可以借助EventManager访问内部事件监听器集合，但该方法依赖Angular私有属性，可能随版本更新失效，仅适合临时场景：

import { Component, ElementRef, EventManager, OnInit } from '@angular/core';

@Component({
  selector: 'my-component',
  templateUrl: './my-component.component.html',
})
export class MyComponent implements OnInit {
  hostHasClickListener = false;

  constructor(
    private elementRef: ElementRef,
    private eventManager: EventManager
  ) {}

  ngOnInit() {
    const elementListeners = (this.eventManager as any)._eventListeners.get(this.elementRef.nativeElement);
    if (elementListeners) {
      this.hostHasClickListener = elementListeners.some((listener: any) => listener.name === 'click');
    }
  }
}

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