Angular 2:使用参数和可选参数重定向路由 [英] Angular 2: Redirect route with parameters and optional parameters

问题描述

我想将一个路由重定向到另一个路由:

I want to redirect a route to another route:

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

/foo/bar/123 schould redirect to /bar/123;mode=test

我按照以下方式配置了路由:

I configured the route in the following way:

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

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

When it is redirecting, the ;mode=test part is missing in the target url. How can I include this?

推荐答案

angular router 基本上查看路径对象并创建应用程序的基本路由集(没有可选参数).如果它们与路径完全匹配，那么它将用于识别路线.所以可选参数不能在它们内部使用，因为它们是可选的".在这些路径对象中包含任何路由参数的唯一方法是使用':something' 语法将它们绑定到 url 中，这样就不是可选的.我认为您有其他一些方法可以满足您的这种需求:

The angular router basically looks at path objects and creates the set of basic routes of your app (without the optional parameters). Which then would be used to recognise routes if they match the path exactly. So the optional parameters cannot be used inside them because they're "optional". And the only way to include any route params in these path objects, is binding them inside the url with':something' syntax which then wouldn't be optional. I think you have some other ways to cover this need of yours:

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

Adding your "mode" parameter to your basic route: You can define a path like this: { path:'/bar/:id/:mode', component: BarComponent } and change your redirect path to { path: 'foo/bar/:id', redirectTo: '/bar/:id/test' }

使用代理组件:将重定向路径更改为: { path: 'foo/bar/:id', component: BarProxyComponent } ，并像这样定义该组件:

Using a proxy component: Change the redirect path to: { path: 'foo/bar/:id', component: BarProxyComponent } , and define that component like this:

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]} 并像这样定义守卫:

Using a canActivate Guard: You can also create a guard service for your 'foo' path, and inside the guard redirect it to the route you want. However, it's not exactly the real intention behind these guards and it's just taking advantage of them for that said problem. You can change the redirect path to { path: 'foo/bar/:id', component: UnusedFooComponent, canActivate: [FooGuard]} and define the guard like this:

@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)...

Also don't forget to provide the FooGuard at a module level. And note that here, you're always redirecting to another place (and returning false) in the guard before the UnusedFooComponent is created...

这篇关于Angular 2:使用参数和可选参数重定向路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！