Angular2 条件路由

这可能是一个基本问题，但是在 Angular2 中是否有任何方法可以进行条件路由？或者，有人会在路由器之外这样做吗？

我知道 ui-router 有一定的能力做到这一点，但我在 Angular2s 路由器中没有看到类似的东西

如上所述，角路线守卫 https://angular.io/docs/ts/latest/guide/router.html#!#guards是实现条件路由的好方法。由于 Angular 教程在该主题上有点冗长，因此这里是如何通过示例使用它们的简短摘要。

1.守卫有多种类型。如果你需要一些逻辑if (loggedIn) {go to "/dashboard"} else { go to "/login"}，那么您要寻找的是CanActivate-警卫。 CanActivate 可以读作“如果满足所有条件Y，则可以激活新路线X”。您还可以定义重定向等副作用。如果这不符合您的逻辑，请查看 Angular 教程页面以查看其他防护类型。

2.创建一个auth-guard.service.ts.

3.填充auth-guard.service.ts使用以下代码：

import { Injectable } from '@angular/core';
import {CanActivate, Router, RouterStateSnapshot, ActivatedRouteSnapshot} from '@angular/router';

@Injectable()
export class AuthGuardService implements CanActivate {

  constructor(
    private router: Router
  ) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    const isLoggedIn = false; // ... your login logic here
    if (isLoggedIn) {
      return true;
    } else {
      this.router.navigate(['/login']);
      return false;
    }
  }

}

4.在路由模块中注册 auth-guard.service.ts。另外，添加键值对canActivate:[AuthGuardService]到您想要守护的所有路线。它应该看起来有点像这样：

const appRoutes: Routes = [
  { path: '', component: LandingComponent},
  { path: 'login', component: LoginComponent},
  { path: 'signup', component: SignUpComponent},
  { path: 'home', component: HomeComponent, canActivate: [AuthGuardService]},
  { path: 'admin', component: AdminComponent, canActivate: [AuthGuardService]},
  { path: '**', component: PageNotFoundComponent }
];

@NgModule({
  imports: [
    RouterModule.forRoot(appRoutes)
  ],
  exports: [
    RouterModule
  ],
  providers: [
    AuthGuardService
  ]
})
export class AppRoutingModule { }

这应该可以帮助你开始。

这是一个简约的演示：https://stackblitz.com/edit/angular-conditional-routing https://stackblitz.com/edit/angular-conditional-routing