angular2-routing - 防止 Angular 2 中的 routerLink 操作

Question

我有一个链接：

<a routerLink="/test" (click)="testClick($event)">Test link </a>

我想在testClick功能上做这样的事情：

testClick(event:any) {
    if (..some expression..) {
        //custom popup confirmation
        //if true --> event.preventDefault();
    } else {
        // go to link
    }
}

但是打电话preventDefault是不行的。我该如何解决？

Answer 1

您可以使用 span 元素包装您的链接文本，并在此 span 上绑定事件处理程序：

<a routerLink="/test"><span (click)="testClick($event)">Test link</span></a>

还有你的处理程序：

function testClick($event: MouseEvent) {
    if (expression) {
        $event.stopPropagation();
        // do something
        return;
    }
    // navigates to /test
}

Answer 2

github上有一个问题：https ://github.com/angular/angular/issues/21457

同时，您可以帮助自己在 routerLink 指令中添加更多逻辑：

<a [routerLink]="someExpression ? [] : '/test'" (click)="testClick()">Test link</a>

这样你需要处理你的表达式两次：一次在链接中，一次在代码中；但另一方面，您根本不必关心该事件，因为它会正常传播，但路由器会简单地忽略它。