带有Angular2中同一元素上的Click侦听器和click事件的指令

Question

<a appMenuDropDown (click)="getSubMenuItems(menuItem)">
.......
</a>

元素具有指令（appMenuDropDown）来监听click事件和click事件处理程序（getSubMenuItems（））时会发生什么？ 哪个处理程序首先被触发？ 指令或getSubMenuItems（）中的处理程序？

@HostListener('click')
clickListener() {
    let sourceElement = this.el.nativeElement;
    ....
}

Answer 1

事件处理程序的顺序是明确未定义的。 同样，如果在一个元素上有多个指令，则它们的添加顺序对于处理顺序事件处理程序并不重要。

Answer 2

我认为在您的情况下，指令中的HostListener总是会先被触发

您可以从源代码中查看编译器中的generateHandleEventMethod方法

directives.forEach((dirAst, dirIdx) => {
  ...
});
boundEvents.forEach((renderEvent, renderEventIdx) => {
  ...
});

https://github.com/angular/angular/blob/2.2.4/modules/%40angular/compiler/src/view_compiler/event_binder.ts#L92-L115

这是生成的component.ngfactory

View_AppComponent0.prototype.handleEvent_4 = function(eventName,$event) {
  var self = this;
  self.debug(4,2,4);
  self.markPathToRootAsCheckOnce();
  var result = true;
  result = (self._AppMenuDropDownDirective_4_3.handleEvent(eventName,$event) && result);
  if ((eventName == 'click')) {
    var pd_sub_0 = (self.context.getSubMenuItems() !== false);
    result = (pd_sub_0 && result);
  }
  return result;
};

演示