Angular 使用@HostListener 来监听特定的按钮点击

Question

我正在使用 Angular 10，我目前正在使用 jquery 通过 id 监听按钮单击。 我知道这不是用 Angular 做到这一点的正确方法，所以我想改变它。

这是当前的代码：

$('#tbtn1').click((e) => {
  e.preventDefault(); 
  this.myMethod();
});

我可以使用： @HostListener来侦听另一个组件上的特定按钮，就像我在上面的示例中所做的那样吗？

我怎样才能做到这一点？

Answer 1

这是代码并且它有效（ng-version =“10.1.6”）：

app.component.html -

<button (click)="onClick($event)">Demo Button</button>

app.component.ts（ extends其他组件）-

export class AppComponent extends DemoComponent {
    @HostListener('document:click', ['$event'])
    onClick(event: MouseEvent): void {
        event.preventDefault();
        this.myMethod();
    }
}

demo.component.ts -

myMethod() {
    console.log('myMethod working!!!');
}