Angular 2: Zatrzymaj propagację zdarzenia elementu nadrzędnego, po kliknięciu łącza

Question

Mam przypadek propagacji zdarzeń. Przykład:

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

Tag jest renderowany z innego komponentu przez innerHtml. Problem: po kliknięciu linku zdarzenie click elementu jest również uruchamiane. Jak rozwiązać problem (zatrzymać propagację doSomething()), wiedząc, że programy obsługi zdarzeń (lub dowolny kod kątowy 2) nie mogą być przekazywane przez innerHtml?

Dziękujemy!

Answer 1

Obejście może być po prostu umieszczając (click)="$event.stopPropagation()" nad text komponentu tak, że zdarzenie nie będzie się pęcherzykami się z gospodarzem komponentu. To samo można improwizować, pisząc Directive.

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

Answer 2

Można użyć $ event obiektu jak poniżej,

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

stopPorpagation(event:any){ 
    event.stopPropagation(); 
    .... 
} 

Answer 3

Można skorzystać z bulgotanie. Od swojego handlarza możesz sprawdzić, czy event.target został kliknięty, a jeśli tak, pomiń swoje działanie.

Należy jednak zachować ostrożność, ponieważ event.target może być numerem event.target! Musisz nie tylko sprawdzić, czy celem zdarzenia jest znacznik A, ale również przejść do drzewa DOM w prostej symulacji bulgotania.

Więc tutaj jest możliwe rozwiązanie:

szablon

(click)="doSomething($event)" 

komponent

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 Example