Angular 13如何获取按钮所在父组件的名称？

方法一：使用Angular内部API（快速实现） #

Angular提供了内部函数ɵgetComponent，可以直接从DOM元素获取对应的组件实例。这个方法无需修改现有组件，直接在点击监听逻辑中遍历DOM即可：

import { Component, HostListener, ɵgetComponent } from '@angular/core';

@Component({
  selector: 'app-audit',
  template: '<router-outlet></router-outlet>'
})
export class AuditComponent {
  @HostListener('document:click', ['$event.target'])
  handleDocumentClicks(event: HTMLElement) {
    // 找到带audit-clicks属性的按钮
    const elm = event.closest("[audit-clicks]");
    if (!elm) return;

    const elmData = elm.getAttribute('audit-data');
    
    // 从按钮父元素开始向上遍历，找对应的组件实例
    let currentElm: HTMLElement | null = elm.parentElement;
    let parentComponentInstance: any = null;

    while (currentElm && !parentComponentInstance) {
      parentComponentInstance = ɵgetComponent(currentElm);
      currentElm = currentElm.parentElement;
    }

    if (parentComponentInstance) {
      // 获取组件类名作为名称
      const parentComponentName = parentComponentInstance.constructor.name;
      console.log('按钮所在父组件:', parentComponentName);
      console.log('组件实例:', parentComponentInstance);
      console.log('按钮审计数据:', elmData);
    }
  }
}

注意：ɵgetComponent是Angular内部未公开的API，未来版本可能有变动，适合内部工具或快速验证场景。

方法二：自定义装饰器（稳定通用） #

如果需要生产环境稳定的方案，可以通过自定义装饰器给所有组件的宿主元素自动添加组件名称属性，之后通过DOM选择器获取：

1. 创建组件名称追踪装饰器 #

import { ElementRef } from '@angular/core';

export const TrackComponent = () => {
  return function(constructor: any) {
    // 保存原ngOnInit方法
    const originalNgOnInit = constructor.prototype.ngOnInit;
    
    constructor.prototype.ngOnInit = function() {
      // 给组件宿主元素添加组件名称属性
      if (this.elementRef instanceof ElementRef) {
        this.elementRef.nativeElement.setAttribute(
          'data-component-name',
          constructor.name
        );
      }
      // 执行原ngOnInit逻辑
      if (originalNgOnInit) {
        originalNgOnInit.call(this);
      }
    };
  };
};

2. 在组件上使用装饰器 #

给需要追踪的组件添加装饰器（或全局统一配置），同时确保组件注入ElementRef：

import { Component, ElementRef } from '@angular/core';
import { TrackComponent } from './track-component.decorator';

@Component({
  selector: 'app-user',
  template: '<button audit-clicks audit-data="user-submit">提交</button>'
})
@TrackComponent()
export class UserComponent {
  constructor(private elementRef: ElementRef) {}
}

3. 修改点击监听逻辑 #

@HostListener('document:click', ['$event.target'])
handleDocumentClicks(event: HTMLElement) {
  const elm = event.closest("[audit-clicks]");
  if (!elm) return;

  const elmData = elm.getAttribute('audit-data');
  // 找到最近的带data-component-name属性的元素
  const parentComponentElm = elm.closest('[data-component-name]');
  
  if (parentComponentElm) {
    const parentComponentName = parentComponentElm.getAttribute('data-component-name');
    console.log('按钮所在父组件:', parentComponentName);
    console.log('按钮审计数据:', elmData);
  }
}

这种方式完全基于公开API，生产环境稳定，且无需手动给每个组件写选择器。

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