Question

民间，在角度2应用场景下需要你的帮助。我有注销链接，需要在AuthService中调用方法。

<li><a [routerLink]="['/logout']"><span class="glyphicon glyphicon-log-out" aria-hidden="true"></span> Logout</a></li>

AuthService中的

方法：

//logout
 logout() {
   this.isUserLoggedin = false;
 }

如何实现这一目标？我不想创建一个仅用于调用注销的新组件。感谢您的帮助。

Answer 1

我想知道同样的事情，但我最终创建了一个带有空白模板的LogoutComponent，并在此之后将用户重定向到登录。基于按钮的注销功能有效，但我想要一个注销路由链接。

<强> LogoutComponent.ts

@Component({
  template: ''
})

export class LogoutComponent implements OnInit {

  constructor(private _authService: AuthService, private router: Router) {}

  ngOnInit() {
    this._authService.logout();
    this.router.navigate(['login']);
  }

}

<强> app.routes.ts

  { path: 'logout', component: LogoutComponent}

Answer 2

如果您不需要组件，则不必使用组件。只需将click事件绑定到注销用户并重定向到所需位置的函数即可。请记住传递$ event对象以防止默认行为：

<li><a href="#" (click)="onClick($event)">(your link content)</a></li>

在呈现该菜单的组件中：

onClick(event: Event): void {
    event.preventDefault(); // Prevents browser following the link
    // Here you can call your service method to logout the user
    // and then redirect with Router object, for example
}

Answer 3

（角度2的解决方案，角度4的解决方案，使用ng-If / Else）

假设链接显示在主页面app.component中，请在app.component.ts中有以下内容。这在用户登录时成功显示Logout链接，否则显示Login链接（由于与Observable绑定而非静态字段）

public isUserLoggedIn: boolean = false;

ngOnInit(): void {
    // Setup a subscription so our variable will know the latest status of login
    this._authService.isLoggedIn().subscribe(status => this.isUserLoggedIn = status);
}

在html中，使用此

<div>
    <table *ngIf="isUserLoggedIn">
        <tr>
            <td>
                <a href="#" (click)="logoutClicked($event)" id="logout"><span class="glyphicon glyphicon-log-out" aria-hidden="true"></span> Logout</a><br
            /></td>
        </tr>
    </table>

    <table *ngIf="! isUserLoggedIn">
        <tr>
            <td>
                <a [routerLink]="['/login']" id="login"><span class="glyphicon glyphicon-log-in" aria-hidden="true"></span>Login</a><br
            /></td>
        </tr>
    </table>
</div>

logoutClicked事件只会调用authService的注销方法

为了避免两次使用相同的方法，ngSwitch是一个更好的选择，但不知何故不能使它工作，虽然看起来如下： -

<div [ngSwitch]="IsUserLoggedIn()">
    <a href="#" (click)="logoutClicked($event)" id="logout" *ngSwitchCase="true">
        <span class="glyphicon glyphicon-log-out" aria-hidden="true"></span> Logout</a><br />

    <a [routerLink]="['/login']" id="login" *ngSwitchCase="false">
        <span class="glyphicon glyphicon-log-in" aria-hidden="true"></span>Login</a>

</div>

Answer 4

假设您的路线是在某个XComponent中定义的，在ngOnInit中你可以得到网址的最后一部分，如此

this.route.url.subscribe(data => {
  this.authType = data[data.length - 1].path;
});

现在检查此路由是否已注销，如果是，则调用authService：

if (this.authType === 'logout') {
  this.authServie.logout();
}

所有进入定义了注销路径的组件的ngOnInit。这样，您就不需要定义额外的Logout组件了！

以角度2注销链接

4 个答案: