Angular全局HostListener仅在组件含对应选择器时才对第三方组件生效

Angular 指令的选择器仅会匹配当前组件编译作用域内的模板元素，第三方组件内部的DOM属于其自身的封装视图，即便修改视图封装模式也不会改变编译作用域，因此你编写的DependencyClickDirective根本无法实例化在第三方组件内部带dependency-id属性的元素上，自然不会注册对应的点击监听。
只有当MyParentComponent自身模板中存在带dependency-id属性的元素时，指令才会被实例化、挂上document级别的点击监听，这就是当前现象的本质原因。

方案1：全局事件委托服务（通用性最强，符合规范） #

不要将document级监听绑定在属性指令上——属性指令的生命周期和附着元素强绑定，天生不适合做全局事件委托。可以通过全局服务统一实现事件委托，只绑定一次事件，无性能问题，也不依赖Angular编译作用域，第三方组件渲染的元素也能被正常捕获：

1. 实现通用监听服务

import { Injectable, NgZone } from '@angular/core';
import { Subject, Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class DependencyClickService {
  private readonly clickTrigger = new Subject<HTMLElement>();
  public readonly dependencyClick$: Observable<HTMLElement> = this.clickTrigger.asObservable();

  constructor(private ngZone: NgZone) {
    // 跳出Angular zone绑定事件，避免不必要的变更检测
    this.ngZone.runOutsideAngular(() => {
      document.addEventListener('click', (e: MouseEvent) => {
        const target = e.target as HTMLElement;
        // 向上查找最近的带dependency-id属性的节点，兼容点击子元素的场景
        const matchedNode = target.closest('[dependency-id]') as HTMLElement | null;
        if (matchedNode) {
          this.ngZone.run(() => this.clickTrigger.next(matchedNode));
        }
      });
    });
  }
}

2. 在需要响应点击的组件中直接订阅使用即可，无需额外绑定指令：

import { Component, ViewChild, OnInit, OnDestroy } from '@angular/core';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
// 引入第三方组件、依赖服务

@Component({
  selector: 'my-parent',
  templateUrl: './my-parent.component.html',
  styleUrls: ['./my-parent.component.scss'],
})
export class MyParentComponent implements OnInit, OnDestroy {
  @ViewChild(3rdPartyComponent, { static: false }) view: 3rdPartyComponent;
  private readonly destroy$ = new Subject<void>();

  constructor(private depClickService: DependencyClickService) {}

  ngOnInit() {
    this.depClickService.dependencyClick$
      .pipe(takeUntil(this.destroy$))
      .subscribe(clickedNode => {
        console.log('点击的dependency节点：', clickedNode);
        // 编写具体业务逻辑
      });
  }

  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

该方案优势：

• 全局仅绑定1次点击事件，不存在批量绑定元素事件的性能问题
• 不依赖Angular指令编译范围，第三方组件动态渲染的内部元素也可被正常捕获
• 逻辑集中复用性强，无硬编码DOM操作的坏味道

方案2：父容器指令委托（适合单组件作用域场景） #

如果仅需要在MyParentComponent的作用域内监听、不想引入全局服务，可以将指令绑定在自身可控的父容器上（而非[dependency-id]目标元素），在指令内部做局部事件委托，保证指令一定会随组件实例化：

import { Directive, ElementRef, OnInit, OnDestroy, EventEmitter, Output } from '@angular/core';

// 直接绑定到my-parent组件选择器，无需额外在模板加标记
@Directive({ selector: 'my-parent' })
export class DependencyClickDirective implements OnInit, OnDestroy {
  @Output() dependencyClick = new EventEmitter<HTMLElement>();
  private clickHandler: (e: MouseEvent) => void;

  constructor(private elRef: ElementRef<HTMLElement>) {}

  ngOnInit() {
    this.clickHandler = (e: MouseEvent) => {
      const target = e.target as HTMLElement;
      const matchedNode = target.closest('[dependency-id]') as HTMLElement | null;
      // 仅处理当前组件内部的匹配元素，避免全局污染
      if (matchedNode && this.elRef.nativeElement.contains(matchedNode)) {
        this.dependencyClick.emit(matchedNode);
      }
    };
    this.elRef.nativeElement.addEventListener('click', this.clickHandler);
  }

  ngOnDestroy() {
    this.elRef.nativeElement.removeEventListener('click', this.clickHandler);
  }
}

使用时直接在MyParentComponent上绑定事件即可：

<my-parent (dependencyClick)="handleDepClick($event)"></my-parent>

不要尝试通过@ViewChild/@ContentChild查询第三方组件内部元素，Angular的视图查询仅能获取当前组件模板内声明的节点，第三方组件内部节点属于其私有视图，外部无法直接查询。也不要遍历全量DOM元素绑定事件，这类实现性能差且无法覆盖动态渲染的节点，不符合开发规范。

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