根据路由参数定义要重定向的 Angular 路由

Question

我有一个非常简单的 Angular 路由模块，用于从一条路由重定向到另一条路由：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  {
    path: 'foo',
    redirectTo: 'bar',
    pathMatch: 'full'
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
  providers: []
})
export class FooRoutingModule { }

现在，我想更改重定向，使其依赖于一个路由参数（可能有比这个更多的参数）。因此，foo?para=0 应该重定向到 barA，而 foo?para=1 应该重定向到 barB。实现这一目标的最简单方法是什么？

Answer 1

您可以使用 Guards 来操纵路由。

在你的情况下，CanActivate 守卫应该能很好地完成这项工作。在这里阅读更多关于它们的信息：https://angular.io/guide/router#canactivate-requiring-authentication

@Injectable()
export class MyGuard implements CanActivate {

  constructor(public router: Router) {}

  canActivate(route: ActivatedRouteSnapshot) {
   switch(route.queryParams['para']) {
     case '0' :
        this.router.navigate(['my/url]);
        break;
     case '1':
          ....
    }
    return false;
  }
}

"return false;"在您的路由中非常重要，因此当前导航（在您的情况下为'foo'）被取消。

在你的路由中

const routes: Routes = [
  {
    path: 'foo', canActivate:[ MyGuard ]
  }
];

根据路由参数定义要重定向的 Angular 路由

Define Angular routes to redirect depending on route parameters

angular2-routing

angular