Angular 2：带参数和可选参数的重定向路由

Question

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

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

我是这样配置路由的：

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

重定向时，目标 url 中缺少 ;mode=test 部分。我怎样才能包括这个？

Answer 1

angular 路由器主要查看路径对象并创建应用程序的基本路由集（没有可选参数）。如果它们与路径完全匹配，则将用于识别路线。所以可选参数不能在它们内部使用，因为它们是“可选的”。在这些路径对象中包含任何路由参数的唯一方法是将它们绑定在 url 中，使用 ':something' 语法，这将不是可选的。我认为您还有其他一些方法可以满足您的这一需求：

将您的“模式”参数添加到您的基本路线： 您可以这样定义路径：{ 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）...

Angular 2：带参数和可选参数的重定向路由

Angular 2: Redirect route with parameters and optional parameters

angular-routing

angular