Quelle est la différence entre le fichier nativeElement.click() et le clic du gestionnaire d'événements?

Question

J'ai essayé d'effectuer un test pour l'application angulaire 2 qui clique sur un bouton d'envoi qui appelle une fonction. J'utilise généralement deux méthodes pour effectuer la même chose.

element.nativeElement.click() 

et

element.triggerEventHandler('click',null); 

Je pensais que ces deux méthodes étaient les mêmes, jusqu'à ce que je suis tombé sur cette situation où le déclenchement méthode de gestionnaire d'événements ne fonctionne pas.

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(); 

Modèle de référence:

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

Alors, y at-il une différence entre ces deux approches ou pensez-vous que je suis allé mal quelque part dans mon code?

Answer 1

element.nativeElement.click()

est native method pour simuler un clic de souris sur un élément. Il bouillonne et il se comporte de la même manière que si on cliquait sur l'élément.

debugElement.triggerEventHandler (eventName, eventObj)

est angulaire méthode intégrée qui appelle simplement tous les auditeurs pour eventName donnée sur l'élément de débogage actuel:

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

sont ajoutés lorsque Listeners DebugRenderer2 fonctionne listen méthode:

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

Cela se produit lorsque nous appliquons un événement la liaison à l'élément comme

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

Disons que nous avons le modèle suivant:

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

Et notre test ressemblera à:

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 

Ensuite, regardons votre modèle. Il n'y a pas de gestionnaire pour button donc triggerEventHandler n'aura aucun effet. D'autre part, button.nativeElement.click(); se déclenchera car le bouton a le type submit et son comportement standart du bouton sur l'événement click.