如何通过路径路径从组件中调用指定的方法？

Question

我有以下路线规则：

{ path: 'logout', component: LoginComponent, data: { title: extract('Login') } },

点击后，我需要在组件LoginComponent中调用方法注销。

我的链接是：

<a class="nav-link topRightLink" routerLink="/logout">Logout</a> 

Answer 1

在LoginComponent中，您有logOut()方法，只需点击链接就可以调用它：

<a (click) = "logOut()">Logout</a>

然后在logOut方法中，您可以使用路由器进行路由，如下所示：

this.router.navigate(['/logout']);

这使您可以灵活地在路线前做其他事情。 你必须导入路由器：

import {Router} from '@angular/router'; 

然后将其注入LoginComponent

Answer 2

使用，

<a class="nav-link topRightLink" [routerLink]="['/logout']">Logout</a>

而不是

<a class="nav-link topRightLink" routerLink="/logout">Logout</a>

Here is the documentation

Answer 3

只需一种方法就不需要整个组件。特别是如果没有视图。并且也不需要路由器。

在组件中将logout（）方法放在<a>标记为：

查看：

<a class="nav-link topRightLink" (click)="logOut()" >Logout</a>

<强>类别：

logOut(){
    //remove the local storage content, display a message, redirect to login page, etc..
}

如果您希望在应用程序中共享该功能，它也可以是对共享服务方法的调用。

logOut(){
  this.sharedService.logOut();
}