防止Angular HostListener传播到父组件

Question

问题

我的一个组件设置了HostListener绑定：

@HostListener('window:resize', ['$event']) callback ($event) {
   // D3Js tasks here …
}

当前，当调用侦听器时，父级组件会重新评估其模板，就像父级确实对某个孩子的output做出了响应。
但是，从侦听器执行的任务不需要父组件的任何更新。

我希望侦听器可以在不使父组件被通知的情况下执行。

在这种情况下可以防止在Angular 这样的冒泡行为吗？

尝试

$event.stopPropagation()否$event.stopImmediatePropagation()都没有帮助，这可能是因为此行为与Angular内部函数有关。
将 HostListener 声明保留为空（注释掉包含的指令）不会改变任何内容，我认为这表明HostListener声明是罪魁祸首。

我当前的解决方案是在组件构造函数中直接从本机DOM事件中创建一个可观察的对象（不依赖于Angular）：

this.onResizeSub = Observable
    .fromEvent(window, 'resize', null, null)
    .subscribe( () => {…});
);

注意：使用Angular v4.4.2，更改检测 OnPush 策略到处都是

。

Answer 1

不幸的是，Angular目前似乎不支持此功能。有一个功能请求，但看来我们不会很快见到它：https://github.com/angular/angular/issues/9587，https://github.com/angular/angular/issues/10990

  

执行顺序为红色鲱鱼-当前未定义将同一元素上的事件传播到多个侦听器的顺序。目前这是设计使然。

     

您的问题是，暴露给侦听器的事件是真实的DOM事件，并且在提供的事件上调用stopImmediatePropagation（）会停止执行此元素上注册的其他侦听器。但是，由于所有通过Angular注册的侦听器都仅由一个dom侦听器代理（出于性能原因），因此对此事件调用stopImmediatePropagation无效。