防止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
}