javascript – 用于修改点击处理的Angular2指令

我正在尝试编写一个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();
    }
  }
}

但是首先执行click handler,因此不会给我的指令停止执行.

我想到的第二种方法是用我自己的处理程序替换(单击)例如([onlineClick] =“onClick”)并在指令认为合适时执行传递的函数,但这样我就不能将params传递给onClick函数而且有点我们要看看.

做这样的事情你有什么想法吗？

解决方法

我不知道强制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);
    }
  }
}