Angular指令拦截点击事件

Question

I want a directive to intercept mouse click event on a whole component.

I wrote an Angular directive to intercept a mouse click event.

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

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

I want to use it in a component, so I wrote

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

but this isn't working.

If I write something like

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

The directive is working if I click the button.

How do I make the directive work for the whole component?

I'm using Angular 13.

Answer 1

You can either wrap an HTML element around the component or add an HTML element to the component itself, and then add the directive.

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

or in the component itself

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