Question

我制作了一个自定义按钮组件，我试图制作一个可应用于按钮的指令，以便在用户单击按钮时动态添加一些行为：

@Directive({
  selector: '[appMyDirective]'
})
export class AppMyDirective {

  // Here, I inject the button instance
  constructor(private button: MyButtonComponent) {
    this.button...what()?
  }

}

我可以在MyButtonComponent上添加一些代码，以处理回调数组，但我希望避免这种情况。如何在不修改其代码的情况下动态处理MyButtonComponent上的click事件？

Answer 1

这非常简单，只需在指令内创建一个函数：

 @HostListener('click', ['$event']) click(event) {
  event.preventDefault();
  ... your code
 }

另请参阅：https://stackoverflow.com/a/34734906/1173391

也有用：

官方文档：https://angular.io/api/core/HostListener
HosBinding和HostListener的简短说明：https://medium.com/@debug_mode/what-are-hostbinding-and-hostlistener-in-angular-985ccf0d4454

为什么要在元素上使用HostListener而不使用addEventListener？当component / directive被销毁时，Angular足够聪明，可以自行取消订阅该事件。如果您使用addEventListener，则将手动删除绑定，否则绑定可能会随着时间的流逝而持续。

Answer 2

像这样使用ViewContainerRef：

@Directive({
  selector: '[appMyDirective]'
})
export class MyDirective{

  constructor(
    private viewContainerRef: ViewContainerRef
  ) { }

  ngOnInit() {
    const ele = this.viewContainerRef.element.nativeElement as Element;

    ele.addEventListener('click',e =>{ 
        console.log(e)
    });
  }

}

在组件上添加点击事件

2 个答案: