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

J'ai un cas de remontée d'événements. Exemple :

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

La balise est rendu à partir d'un autre composant via innerHtml. Le problème: lorsque je clique sur le lien, cliquez sur l'événement de l'élément est mis le feu. Comment résoudre le problème (arrêter la propagation de doSomething()), sachant que les gestionnaires d'événements(ou tout angulaire 2 du code ) ne peut pas être passé à travers innerHtml?

Merci!

InformationsquelleAutor misha | 2017-01-08
  1. 17

    Solution de contournement pourrait être le simple fait de placer (click)="$event.stopPropagation()" sur text composant, de sorte que l'événement ne sera pas obtenir bouillonnait de composant d'hébergement. La même chose peut être improviser par la rédaction d'un Directive.

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

    Vous pouvez prendre avantage de bulles. À partir de votre gestionnaire vous pouvez regarder event.target pour voir si un A a été cliqué, et, dans l'affirmative, passez votre action.

    Être prudent, cependant, parce que event.target peut être le SPAN! Vous avez besoin non seulement de vérifier si l'événement cible est un A tag, mais également marcher jusqu'à l'arbre du DOM dans une simple simulation de bulles.

    Alors, voici 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')
  }
}

    Plunker Exemple

    InformationsquelleAutor yurzui
  3. 4

    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();
    ...
}
    InformationsquelleAutor micronyks