没有组件的Angular2路由答案

【问题标题】：Angular2 routing without component没有组件的Angular2路由
【发布时间】：2018-10-24 10:26:54
【问题描述】：

我想监听NavigationStart事件，判断其url属性是否为/logout。如果是这样，当我的侦听器检测到正确的NavigationStart 事件。否则路由器应该继续路由。

我不想使用组件，因为我不会显示任何 /logout 视图。

import { Component, OnInit } from '@angular/core';
import { Router, NavigationStart } from '@angular/router';


@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.scss']
})
export class NavbarComponent implements OnInit {

  constructor(
    private router: Router,
  ) {
    router.events.filter(event => event instanceof NavigationStart).subscribe(
      (event: NavigationStart) => {
        if (event.url == '/logout') {
          this.logout();
          // TODO stop firing successive events
        }
      }
    );
  }

  ngOnInit() { }

  logout() {
    // TODO logout operations
  }

}

【问题讨论】：

您必须将您的用户重定向到某个地方，否则，他会留在经过身份验证的用户的视图中。您不能将用户重定向到登录视图吗？目前还不清楚你想要实现什么。

标签： angular angular2-routing angular2-directives

【解决方案1】：

您可以使用路由守卫。当路由匹配 'logout' 时，'YourGuard' 将用于激活或不激活路由。如果守卫返回true，它将被重定向到'users/sign_in'（只是一个例子）。如果没有，您可以在 YourGuard 中重定向到其他路径或执行其他操作。

{ path: 'logout', canActivate: [ YourGuard ], redirectTo: 'users/sign_in' }

您无需“收听”路线事件。阅读更多关于守卫的信息here。

【讨论】：

登出的时候想做点什么怎么办？例如：设置或更改变量？
您可以在警卫的 canActivate() 方法中执行此操作。
我试过了，但没有调用YourGuard.canActivate()。你知道为什么吗？
[CanActivate] gurd 在没有组件的情况下不会触发。有一张票，github.com/angular/angular/issues/18605 workaround => {path: 'logout', children: [], canActivate: [LogoutGurd]},

【解决方案2】：

使用 LoginComponent 代替 redirectoTo：

  {
    path: 'logout',
    canActivate: [YourGuard],
    component: TheLoginComponent,
  }

现在在 YourGuard 中，您可以从本地存储或类似的东西中删除用户...

【讨论】：