Angular2指令修改点击处理

Question

我正在尝试编写一个 Angular2 属性指令来修改某些元素的行为。更具体地说，我想将属性应用于具有点击处理程序的某些元素，并防止绑定函数在特定条件下执行。

所以现在我有一个元素，例如：

 <button (click)="onClick(param1, param2)"></button>

onClick 是在承载按钮元素的组件上声明的一个函数，该组件执行一些工作。

我想做的是写这样的东西：

 <button (click)="onClick(param1, param2)" online-only></button>

并有一个指令，如：

 @Directive({
  selector: '[online-only]',
})
export class OnlineOnlyDirective {
  @HostListener('click', ['$event'])
  onClick(e) {
    if(someCondition){
      e.preventDefault();
      e.stopPropagation();
    }
  }
}

但是点击处理程序首先执行，因此我的指令没有机会停止其执行。

我想到的第二种方法是用我自己的处理程序 eg( [onlineClick]=“onClick” ) 替换 (click) 并在指令认为合适时执行传递的函数，但是这样我不能将参数传递给 onClick 函数并且有点看起来更奇怪。

你有没有想过做这样的事情？

原文由 masimplo 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我不知道有什么方法可以强制 Angular 先执行某个事件处理程序。解决方法可能是使用自定义事件，例如：

 <button (myClick)="onClick(param1, param2)" online-only></button>

 @Directive({
  selector: '[myClick]',
})
export class OnlineOnlyDirective {
  @Output() myClick: EventEmitter = new EventEmitter();
  @HostListener('click', ['$event'])
  onClick(e) {
    if(someCondition){
      e.preventDefault();
      e.stopPropagation();
    } else {
      this.myClick.next(e);
    }
  }
}

原文由 Günter Zöchbauer 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

到目前为止，这不可能以您想要的方式实现（只需使用 (click) 绑定）。这是因为所有通过 Angular -> by (click) 绑定 @HostListner 注册的事件都是通过单个侦听器代理的。这就是为什么在这种情况下调用 stopPropagation 或更正确地调用 stopImmediatePropagation 不起作用，因为您不再有单独的事件侦听器。请参考此问题以获取更多详细信息： https ://github.com/angular/angular/issues/9587。

原文由 wawka 发布，翻译遵循 CC BY-SA 3.0 许可协议