Angular 2：单击链接时停止父元素事件的传播答案

【问题标题】：Angular 2 : Stop propagation of parent element's event , when clicking on linkAngular 2：单击链接时停止父元素事件的传播
【发布时间】：2017-05-22 16:53:38
【问题描述】：

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

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

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

谢谢！

【问题讨论】：

标签： angular typescript innerhtml angular2-template event-bubbling

【解决方案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>

【讨论】：

【解决方案2】：

您可以利用冒泡。在您的处理程序中，您可以查看 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

【讨论】：

【解决方案3】：

您可以使用$event 对象如下：

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

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

【讨论】：

;false" 是这里的重要因素。像魅力一样工作。 ++

【解决方案4】：

(click)="$event.stopPropagation()" 为我工作，早些时候我尝试不使用“$”它当时不起作用。

【讨论】：