通过功能调用使用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)在link元素上放置一个处理程序。

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

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

Answer 2

你也可以尝试这样..如果你在routerlink中有操作..

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

这两种方法都有效..

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

我已经在 Angular 7 中尝试过了，它正在工作..

Answer 3

只需向标签添加一个(click)事件<a>即可。看看这个stackblitz 的实际应用。