Javascript 修改单击处理的Angular2指令

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

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

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

但是首先执行click处理程序，因此没有给我的指令停止执行的机会

我考虑的第二种方法是用我自己的处理程序替换（单击），例如（[onlineClick]=“onClick”），并在指令认为合适时执行传递的函数，但这种方法我无法将参数传递给onClick函数，看起来有点奇怪

---

你对这样做有什么想法吗？

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

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

---

到目前为止，以您希望的方式（仅使用（单击）绑定）这是不可能的。这是因为通过Angular->by（click）绑定@HostListner注册的所有事件都是通过单个侦听器代理的。这就是为什么在本例中调用StopRopagation或更正确地调用stopImmediatePropagation不起作用，因为您不再有单独的事件侦听器。有关更多详细信息，请参考本期：。

我最近经历了一些类似的事情，我想做的事情，建议的答案不起作用，可能是因为我在自定义组件上使用了单击处理程序。这就是我所做的

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

这将删除组件或元素上的单击事件侦听器。这不会是被动的，因此，如果

someCondition

发生更改，则必须有一种方法将单击侦听器放回原位。但我并不需要这个用例

更新

---

这在开发中对我有效，但在生产环境中代码缩小时对我无效。

是的，最好采用我描述的第二种方法。使用EventEmitter而不是传入要调用的函数会产生很大的不同。第一种方法可能会更优雅，但angular2可能也不支持您所说的方法。只是好奇选择器是否应该是“[仅在线]”？试图找出该指令发生了什么。我不知道

仅联机

是否或如何与该问题相关。我认为选择器应该是

选择器：“[仅联机]”，

。是胶水吸引了这个指令。

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

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

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

@Directive({
   selector: '[online-only]',
})
export class OnlineOnlyDirective implements OnInit {
   constructor(private el: ElementRef) { }

   ngOnInit() {
      if (someCondition) {
         this.el.nativeElement.removeAllListeners('click');
      }
   }
}