Angular 2: Stoppen Sie die Weitergabe des Ereignisses des übergeordneten Elements, wenn Sie auf den Link klicken

Question

Ich habe einen Fall von Event-Sprudeln. Beispiel:

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

Das Tag wird von einer anderen Komponente über innerHtml gerendert. Das Problem: Wenn ich auf den Link klicke, wird auch das click -Ereignis des Elements ausgelöst. Wie man das Problem löst (stoppe die Verbreitung von doSomething()), wissend, dass Event-Handler (oder irgendein angular 2-Code) nicht durch innerHtml passieren können?

Vielen Dank!

Answer 1

Abhilfe könnte einfach (click)="$event.stopPropagation()" über text Komponente platzieren, so dass Ereignis von Hosting-Komponente nicht eingeblasen wird aufstehen. Die gleiche Sache kann improvisiert werden, indem man eine Directive schreibt.

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

Answer 2

Sie können wie unten $ event Objekt verwenden,

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

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

Answer 3

Sie können die Vorteile von sprudelnden nehmen. Von Ihrem Handler aus können Sie unter event.target nachsehen, ob ein A angeklickt wurde, und falls ja, überspringen Sie Ihre Aktion.

Seien Sie vorsichtig, denn event.target kann der SPAN sein! Sie müssen nicht nur überprüfen, ob das Ziel des Ereignisses ein A-Tag ist, sondern auch den DOM-Baum in einer einfachen Simulation von Bubbling durchlaufen.

ist also hier mögliche Lösung:

Vorlage

(click)="doSomething($event)" 

Komponente

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