Angular指令拦截点击事件

Question

我想要一个指令来拦截整个组件上的鼠标单击事件。

我写了一个 Angular 指令来拦截鼠标点击事件。

@Directive({
    selector: '[interceptClick]'
})
export class InterceptClickDirective {
    constructor() {}

    @HostListener('click', ['$event'])
    onClick($event: MouseEvent): void {
      console.log('mouse clicked');
    }
}

我想在组件中使用它，所以我写了

<my-component interceptClick></my-component>

但这不起作用。

如果我写类似的东西

<div>
    <button interceptClick>my button</button>
</div>

如果我单击按钮，该指令将起作用。

如何使指令对整个组件起作用？

我正在使用 Angular 13。

Answer 1

您可以将 HTML 元素包裹在组件周围，或者将 HTML 元素添加到组件本身，然后添加指令。

<div interceptClick>
    <my-component></my-component>
</div>

或者在组件本身

<div interceptClick>
    'All HTML content of the component'
</div>