Question

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

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

bool repeat = false;
vector<char> letters(m);
char letter;
for(int i = 0; i < m; i++){
    do
    {
        repeat = false;
        letter = rand()%26 +97; // generate new random number
        for(int j = 0; j<=i; j++) // iterate through the already generated numbers
        {
            if (letter == letters[j]){ // if the generated number already exists, do the while again
                repeat = true;
                break;
            }
        }
    } while(repeat);
    letters[i] = letter; // assign the unique number
    cout << letter;
    repeat = false;
}

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

<强> Demo

具有单击侦听器的指令，并在Angular2中的同一元素上单击事件

2 个答案: