В чем разница между nativeElement.click() и щелчок обработчика событий?

Я пытался выполнить тест для приложения angular 2, который нажимает кнопку отправки, которая вызывает функцию. Обычно я использую два метода для выполнения одного и того же.

element.nativeElement.click()

и

element.triggerEventHandler('click',null);

Я думал, что оба эти метода одинаковы, пока не столкнулся с этой ситуацией, когда метод обработчика событий запуска не работает.

element = fixture.debugElement.query(By.css('.dropList li'));
element.triggerEventHandler('click',null);  //Click event works here
fixture.detectChanges();
let button = fixture.debugElement.query(By.css('button'));
//button.triggerEventHandler('click',null);    //Does not call function
button.nativeElement.click();    //Calls function
fixture.detectChanges();

шаблон для вашей справки:

<form (ngSubmit)="printSelection()">
   <div class="dropList">
     <ul>
        <li *ngFor="let element of data.elements" (click)="selectElement(element)"> </li>
    </ul>
   </div>
   <button type="submit">Submit</button>
</form>

Итак, есть ли разница между этими двумя подходами или вы думаете, что я, возможно, ошибся где-то в моем коде?

1 ответов


элемент.nativeElement.нажмите кнопку()

is собственный метод для имитации щелчка мыши на элементе. Он пузырится и ведет себя так же, как если бы мы нажали на элемент.

debugElement.triggerEventHandler (имя события, eventObj)

угловой встроенный метод, который просто вызывает все прослушиватели для заданного имени события на текущем элементе отладки:

triggerEventHandler(eventName: string, eventObj: any) {
  this.listeners.forEach((listener) => {
    if (listener.name == eventName) {
      listener.callback(eventObj);
    }
  });
}

слушатели добавляются при DebugRenderer2 работает listen способ:

listen(
    target: 'document'|'windows'|'body'|any, eventName: string,
    callback: (event: any) => boolean): () => void {
  if (typeof target !== 'string') {
    const debugEl = getDebugNode(target);
    if (debugEl) {
      debugEl.listeners.push(new EventListener(eventName, callback));
    }
  }

  return this.delegate.listen(target, eventName, callback);
}

это происходит, когда мы применяем привязку события к элементу, такому как

  • (click)="handler()"
  • @HostListener('click')
  • host: '{ '(mouseenter): 'handler()' }
  • renderer.listen

Допустим у нас есть следующий шаблон:

<div (click)="test()">
  <div class="innerDiv">
     {{title}}
  </div>
</div>

и наш тест будет выглядеть так:

de = fixture.debugElement.query(By.css('.innerDiv'));

de.nativeElement.click(); // event will be bubbled and test handler will be called

de.triggerEventHandler('click', null); // there is not handlers for click event 
                                       // that angular added to this element 
                                       // so test method won't be called

тогда давайте посмотрим на ваш шаблон. Нет обработчиков для button так triggerEventHandler не будет эффект. С другой стороны!--12--> будет стрелять отправить, потому что кнопка имеет тип отправки и его стандартное поведение кнопки на событие щелчка.