Angular中nativeElement.querySelector失效问题求助

我创建了list.directive.ts封装可复用功能，希望在组件中使用该指令。尝试通过@HostListener不依赖HTML内联点击事件来捕获按钮点击，但代码const specificElement = this.elementRef.nativeElement.querySelector('#button');无法正常工作。

原问题代码 #

list.directive.ts #

import {Directive, ElementRef, HostListener} from '@angular/core';
@Directive({
    selector: '[ListDirective]'
})
export class ListDirective{
    constructor(private elementRef: ElementRef) { }

    @HostListener('document:click', ['$event.target'])
    onClick(targetElement: HTMLButtonElement) {
       const specificElement = this.elementRef.nativeElement.querySelector('#button');
  
       if (targetElement === specificElement) {
         console.log('Specific element clicked');
       }
       
    }
}

组件模板 #

<ul>
  <li>
    <button id="button" ListDirective type="button"> Open</button>
    <ul>
        <li>Sublist</li>
    </ul>
  </li>
</ul>

问题原因 #

指令直接应用在<button>元素上，this.elementRef.nativeElement就是这个按钮本身。而querySelector('#button')会在当前元素的子节点中查找匹配元素，按钮本身没有id为button的子元素，因此返回null，导致后续的点击判断永远不成立。

解决方案 #

方案1：直接使用宿主元素 #

既然指令的宿主就是目标按钮，直接用this.elementRef.nativeElement代替querySelector的结果即可：

import {Directive, ElementRef, HostListener} from '@angular/core';
@Directive({
    selector: '[ListDirective]'
})
export class ListDirective{
    constructor(private elementRef: ElementRef) { }

    @HostListener('document:click', ['$event.target'])
    onClick(targetElement: HTMLButtonElement) {
       const specificElement = this.elementRef.nativeElement;
  
       if (targetElement === specificElement) {
         console.log('Specific element clicked');
       }
    }
}

方案2：直接监听宿主点击事件（更高效） #

不需要全局监听document的点击事件，直接监听指令宿主元素的click事件，代码更简洁且性能更好：

import {Directive, HostListener} from '@angular/core';
@Directive({
    selector: '[ListDirective]'
})
export class ListDirective{
    constructor() { }

    @HostListener('click')
    onClick() {
       console.log('Specific element clicked');
    }
}

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