停止Angular 2中的事件传播
在Angular 2中停止鼠标事件传播的最简单方法是什么？ 我应该通过特殊的$event对象，并呼吁stopPropagation()我自己或有其他的方式。 例如在meteor我可以简单地从事件处理程序返回false 。
如果您希望能够将其添加到任何元素，而无需一遍又一遍地复制/粘贴相同的代码，则可以制作一个指令来执行此操作。 它如下简单：
import {Directive, HostListener} from "@angular/core"; @Directive({ selector: "[click-stop-propagation]" }) export class ClickStopPropagation { @HostListener("click", ["$event"]) public onClick(event: any): void { event.stopPropagation(); } }
然后把它添加到你想要的元素：
<div click-stop-propagation>Stop Propagation</div>
最简单的就是在事件处理程序上调用停止传播。 $event在Angular 2中的作用相同，并且包含正在进行的事件（通过鼠标点击，鼠标事件等）：
(click)="onEvent($event)"
在事件处理程序上，我们可以停止传播：
onEvent(event) { event.stopPropagation(); }
在stopPropagation上调用stopPropagation可防止传播：
(event)="doSomething($event); $event.stopPropagation()"
对于preventDefault只是返回false
(event)="doSomething($event); false"
如果你在绑定到一个事件的方法，只需返回false：
@Component({ (...) template: ` <a href="/test.html" (click)="doSomething()">Test</a> ` }) export class MyComp { doSomething() { (...) return false; } }
我不得不stopPropigation并防止preventDefault ，以防止一个button，扩大了它坐在上面的手风琴项目。
所以…
@Component({ template: ` <button (click)="doSomething($event); false">Test</button> ` }) export class MyComponent { doSomething(e) { e.stopPropagation(); // do other stuff... } }
添加到@AndroidUniversity的答案。 在一行中，你可以这样写：
<component (click)="$event.stopPropagation()"></component>
使用JavaScript禁用href链接
<a href="#" onclick="return yes_js_login();">link</a> yes_js_login = function() { // Your code here return false; }
它还应该如何在TypeScript中使用Angular（My Version：4.1.2）
模板
<a class="list-group-item list-group-item-action" (click)="employeesService.selectEmployeeFromList($event); false" [routerLinkActive]="['active']" [routerLink]="['/employees', 1]"> RouterLink </a>
打字稿
public selectEmployeeFromList(e) { e.stopPropagation(); e.preventDefault(); console.log("This onClick method should prevent routerLink from executing."); return false; }
但是它并不禁用routerLink的执行！
