Angular 2:使用参数和可选参数重定向路由

时间:2017-08-25 10:01:24

标签: angular angular-routing

我想将路线重定向到另一条路线:

/ foo / bar / 123 schould重定向到/ bar / 123; mode = test

我按以下方式配置了路线:

{ path: 'foo/bar/:id', redirectTo: '/bar/:id;mode=test' },

重定向时,目标网址中缺少;mode=test部分。我怎么能包括这个?

1 个答案:

答案 0 :(得分:4)

角度路由器基本上查看路径对象并创建应用程序的基本路由集(不带可选参数)。然后,如果路线与路径完全匹配,则用于识别路线。因此,可选参数不能在其中使用,因为它们可选"可选"。并且在这些路径对象中包含任何路径参数的唯一方法是将它们绑定在网址内,并使用':'语法然后是不可选的。 我认为你还有其他方法来满足你的需求:

添加"模式"基本路线的参数: 您可以定义如下路径:{ path:'/bar/:id/:mode', component: BarComponent }并将重定向路径更改为{ path: 'foo/bar/:id', redirectTo: '/bar/:id/test' }

使用代理组件: 将重定向路径更改为:{ path: 'foo/bar/:id', component: BarProxyComponent },并按以下方式定义该组件:

export class BarProxyComponent {
   constructor(private _router: Router, private _route: ActivatedRoute){
      _router.navigate(['/bar/'+_route.snapshot.params['id'],{mode: 'test'}]);
   }   
}

使用canActivate Guard:您还可以为您的' foo'路径,并在警卫内部将其重定向到您想要的路线。然而,这并不是这些守卫背后的真正意图,而是只是利用它们来解决这个问题。 您可以将重定向路径更改为{ path: 'foo/bar/:id', component: UnusedFooComponent, canActivate: [FooGuard]},并像这样定义警卫:

@Injectable()
export class FooGuard implements CanActivate {

constructor(private _router: Router){}
   canActivate(route: ActivatedRouteSnapshot) {
      this._router.navigate(['/bar/'+route.params['id'],{mode: 'test'}]);
      return false;
   }
}

也不要忘记在模块级别提供FooGuard。 请注意,在创建UnusedFooComponent之前,您始终会在警卫中重定向到另一个地方(并返回false)...