Angular 2：当点击链接时停止父元素事件的传播

Question

我有一个事件冒泡的情况。示例：

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

标记通过innerHtml从另一个组件呈现。问题：当我点击链接时，元素的点击事件也被触发。如何解决问题（停止传播doSomething（）），知道事件处理程序（或任何角2代码）不能通过innerHtml？

谢谢！

Answer 1

解决方法可能只是简单地将(click)="$event.stopPropagation()"放置在text组件之上，以便事件不会从主机组件冒出来。同样的事情可以通过编写Directive来实现。

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

Answer 2

您可以使用$事件如下对象，

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

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

Answer 3

您可以起泡的优势。从您的处理程序中，您可以查看event.target以查看是否点击了A，如果是，请跳过您的操作。

但要小心，因为event.target可能是SPAN！您不仅需要检查事件的目标是否为A标记，还需要通过简单的冒泡模拟来查找DOM树。

所以这里有可能的解决方案：

模板

(click)="doSomething($event)" 

组件

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