web-dev-qa-db-fra.com

Angular 2: Arrête la propagation de l'événement de l'élément parent, en cliquant sur le lien

J'ai un cas de bouillonnement d'événement. Exemple :

<td (click)="doSomething()">
  <text [innerHtml]="content"> 
        //  content of innerHtml is :  <a href="http://google.com"></a>
  </text>
</td>

La balise est rendue à partir d'un autre composant via innerHtml. Le problème: lorsque je clique sur le lien, l'événement click de l'élément se déclenche également. Comment résoudre le problème (arrêter la propagation de doSomething ()), sachant que les gestionnaires d'événements (ou tout code angular 2) ne peuvent pas être transmis via innerHtml?

Je vous remercie!

angulartypescriptinnerhtmlangular2-templateevent-bubbling
13
misha

Solution pourrait simplement placer (click)="$event.stopPropagation()" sur text composant, afin que cet événement ne se propage pas du composant d'hébergement. La même chose peut être improvisée en écrivant un Directive.

<td (click)="doSomething()">
  <text (click)="$event.stopPropagation()" [innerHtml]="content"> 
        //  content of innerHtml is :  <a href="http://google.com"></a>
  </text>
</td>
19
Pankaj Parkar

Vous pouvez profiter du bouillonnement. Depuis votre gestionnaire, vous pouvez consulter event.target pour voir si un A a été cliqué, et si oui, ignorez votre action.

Soyez prudent, car event.target peut être le SPAN! Vous devez non seulement vérifier si la cible de l'événement est une balise A, mais aussi remonter l'arborescence DOM dans une simulation simple de bullage.

Voici donc une solution possible:

modèle 

(click)="doSomething($event)"

composant 

export class AppComponent {
  content = '<a href="http://google.com">Link text <span>Nested text</span></a>'

  doSomething(e) {
    let target = e.target;

    while (target !== e.currentTarget) {
      if (target.tagName == 'A') return;
      target = target.parentNode;
    }

    alert('do something')
  }
}

Exemple Plunker

7
yurzui

Vous pouvez utiliser $event objet comme ci-dessous:

<a (click)="stopPropagation($event);false"     //<<<----added click event
    href="http://google.com">
</a>

stopPropagation(event: Event){
    event.stopPropagation();
    ...
}
5
micronyks