Question

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

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

Answer 1

如上所述，Angular Route Guards是实现条件路由的好方法。由于Angular Tutorial在这个主题上有点冗长，这里有一个简短的总结如何使用它们的例子。

1。有几种类型的警卫。如果您需要某些逻辑CanActivate，那么您要找的是auth-guard.service.ts - Guard。 CanActivate可以读作“如果满足所有条件Y，则可以激活新路径X”。您还可以定义重定向等副作用。如果这不符合您的逻辑，请查看Angular Tutorial页面以查看其他防护类型。

2。创建auth-guard.service.ts。

3. 使用以下代码填充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; } } }：

canActivate:[AuthGuardService]

4. 在路由模块中注册auth-guard.service.ts。此外，将键值对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 { }添加到要保护的所有路由。它应该看起来像这样：

$(document).ready(function () {
    $('form.addToCart').on('submit', function(e) {
        e.preventDefault();

        $.ajax({
            url: $(this).attr('action'),
            type: $(this).attr('method'),
            data: $(this).serialize(),

            success: function (data) {
                alert("Item added to cart!");
            },

            error: function (jxhr, text, error) {
                alert(error);
            }
        });
    });
});

这应该让你开始。

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

Answer 2

<强>更新

在新的路由器中可以使用防护装置 https://angular.io/guide/router#milestone-5-route-guards

原始（对于已久的路由器）

实施此Life cycle hooks in Angular2 router所示的Light生命周期挂钩，如果您想阻止导航，则返回false。另请参阅https://angular.io/docs/ts/latest/api/router/CanActivate-var.html

Answer 3

如果您需要渲染特定组件而不是重定向到它，您可以执行以下操作：

const appRoutes: Routes = [
  {
    path: '' ,
    component: (() => {
      return SessionService.isAnonymous() ? LoginComponent : DashboardComponent;
    })()
  } 
]

我将此示例用于着陆页，其中之前未登录的用户会看到着陆页或信息中心信息中心。

<强>更新此代码将在dev环境中工作，但它不会构建，您将收到此错误：

在“AppRoutingModule”的模板编译过程中出现错误错误 'ɵ0'中的装饰器不支持函数表达式 'ɵ0'包含src / app / app.routing-module.ts（14,25）中的错误考虑将函数表达式更改为导出函数。

为了解决这个问题，我创建了一个单独的模块，看起来如下

import {LandingPageComponent} from '../landing-page/landing-page.component';
import {DashboardComponent} from "../dashboard/dashboard.component";
import {SessionService} from "../core/services/session.service";

const exportedComponent = SessionService.isAnonymous() ? LandingPageComponent : DashboardComponent;

export default exportedComponent;

然后你只需要导入那个“工厂”提供的模块

import LandingPageComponent from './factories/landing-factory.component';
const appRoutes: Routes = [
  {
    path: '' ,
    component: LandingPageComponent
  },
]

Angular2条件路由

3 个答案: