使用单击事件处理程序防止routerLink更改路由

Question

我的角应用包含有一个锚标记routerLink和click与之相关的处理程序:

<a [routerLink]="/abc" (click)="onClick"> </a>

我想routerLink在用户右键单击并选择"在新标签页中打开"时使用.

该click如果用户只需左键点击的链接处理程序应被触发.在这种情况下,我不希望routerLink触发路由更改.

在我的点击处理程序中,我尝试中止点击事件,即

public onClick(event: MouseEvent): {
    // Was hoping this would do it...
    event.preventDefault();
    // .. clutching at straws
    event.stopPropagation();
    // .. oh dear oh dear. Still not working
    event.stopImmediatePropagation();
}

这些都不会妨碍routerLink激活和导航新路线/abc.如何让我的click处理程序阻止routerLink被解雇？

Answer 1

如果您想手动处理点击导航，<a>请删除routerLink模板中的指令。

<a href=# (click)="onClick"> </a>

使用上面的通知href=#是因为，它将模拟就好像链接没有任何变化，即您仍然会像正常一样看到悬停上的指针，<a>否则您可以忽略它并添加自定义类。

相反，你要onClick适当地处理它。

constructor(private router:Router){}

public onClick(){

// Handle routing here or whatever behavior you want
this.router.navigate(['./abc']);

}