Question

我有一个链接：

<app-my-component [myInput]="input"></app-my-component>

我想在<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 } }并不起作用。我该如何解决？

Answer 1

您可以使用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>

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

阻止Angular 2中的routerLink操作

2 个答案: