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 handler，因此不会给我的指令提供停止执行的机会。

我想到的第二种方法是用我自己的处理程序替换（单击）例如（[onlineClick] =“onClick”）并在指令认为合适时执行传递的函数，但这样我就无法将params传递给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注册的所有事件 - ＆gt;通过（click）绑定，@ HostListner，通过单个侦听器代理。这就是为什么在这种情况下调用stopPropagation或更正确的方法stopImmediatePropagation不起作用，因为你不再拥有单独的事件监听器。有关详细信息，请参阅此问题：https://github.com/angular/angular/issues/9587。

Answer 3

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

string[] lines = textRange.Text.ToString().Split("\r\n".ToCharArray(), StringSplitOptions.RemoveEmptyEntries);

或

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

指令看起来像这样：

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

这将删除组件或元素上的click事件侦听器。这不会是被动的，因此，如果@Directive({ selector: '[online-only]', }) export class OnlineOnlyDirective implements OnInit { constructor(private el: ElementRef) { } ngOnInit() { if (someCondition) { this.el.nativeElement.removeAllListeners('click'); } } }发生更改，则必须有一种方法将点击侦听器放回原处。我不需要这个用例。

Angular2指令修改点击处理

3 个答案: