javascript - Angular2指令修改点击处理

Question

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

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

<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)，例如 ( [onlineClick]="onClick") 并在指令认为合适时执行传递的函数，但这样我就不能将参数传递给 onClick 函数和看起来有点奇怪。

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

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);
    }
  }
}