如何在指令中监听子元素事件？

Question

由于没有模板,在指令中监听子元素事件的最佳方法是什么？有可能HostListener吗？如果没有,还有其他方法吗？

还有这个类似的问题:如何从Angular2中的父指令监听子事件,但建议的方法不能解决我的问题,因为我的指令和子元素不在同一个模板中(指令在主机上).

干杯!

编辑#1

这就是我目前正在做的事情(必须有更好的方法):

首先注入ElementRef我的指令:

constructor(private elView: ElementRef) {}

然后用jQuery(或普通的JS)绑定:

$(this.elView.nativeElement)
.on('drag', '#childId', this.slide.bind(this))

Answer 1

如果您要侦听的事件是一个冒泡的本机DOM事件,那么您可以使用 @HostListener()

@HostListener('click', ['$event'])
handleClick(event) {
  // handle event
}

如果它们是子组件的输出,您可以查询它们并订阅它们的输出

@ContentChildren(ChildComponent) children:QueryList<ChildComponent>;

ngAfterContentInit() {
  this.children.toArray().forEach((item) => {
    item.someOutput.subscribe(...);
  });
}

或者您可以使用您在问题中链接的答案中使用的方法.