通过功能调用使用routerLink

Question

我正在尝试将routerLink与以下功能一起使用：

<a class="nav-link" [routerLink]="callHome(data)">Home </a>

callHome(data){
   //perform some operations
   this.router.navigate(["/home"]);
}

这里的问题是，每当我刷新页面时，甚至没有单击Home，它都会自动导航到/home。

我尝试过的另一个选择是：

<a class="nav-link" [routerLink]="['/home']">Home </a>

在这里，尽管它可以工作，但是我无法在导航之前进行操作。

我不能使用按钮并使用(click)，因为我也希望它也用作link。如果使用按钮，则link消失了。

如何与函数调用一起使用[routerLink]？

Answer 1

您应该能够在链接元素上放置(click)处理程序。

<a class="nav-link" [routerLink]="['/home']" (click)="doSomeLogic()">Home</a>

在浏览路由器链接之前，它应该执行(click)处理程序。

Answer 2

您只需要简单地影响路由的字符串值即可。...就像这样：

callHome(data){    
    //perform some operations    
    return "/home"; 
}

如该堆栈溢出中所述：Angular 5 click bind to anchor tag

您可能想将类btn添加到标签中，以使其如下所示：

<a class="btn" (click)="callHome(data)">Home </a>

Answer 3

也只需将(click)事件添加到<a>标记中。观看此stackblitz的操作。

Answer 4

您也可以尝试这样。 如果您在routerlink中进行过操作。.

<a class="nav-link" routerLink="{{callHome(data)}}">Home </a>

它在两种方法中都有效。

<a class="nav-link" routerLink="{{otherMethod()}}" (click)="callHome(data)">Home </a>

我已经在7号角尝试过了，它正在工作。.