帶有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;
};

演示