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

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

我考虑的第二种方法是将 (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);
    }
  }
}

Answer 2

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

Answer 3

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

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

这将删除组件或元素上的点击事件侦听器。这不会是反应性的，因此如果 someCondition 发生变化，则必须有一种方法可以将点击侦听器放回原处。不过我不需要这个用例。

更新

这对我在开发中有用，但当代码在生产环境中缩小时对我不起作用。

Angular2指令修改点击处理

Angular2 Directive to modify click handling

javascript

ionic2

angular2-directives

angular

更新