停止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的执行!