[英]Angular route redirectTo with params
I have a problem with angular routing. 我有角度路由的问题。 In my app i had some routes like this:
在我的应用程序中我有一些像这样的路线:
[{
path: 'myroutes/:id',
component: BarComponent
}, {
path: 'myroutes/:id/:value',
component: FooComponent
}]
I want to change this routing, but the old routes must be redirected to the new ones. 我想更改此路由,但旧路由必须重定向到新路由。 So i changed my code like this:
所以我改变了我的代码:
[{
path: 'myroutes/:id/:value',
redirectTo: 'myroute/:id/:value'
}, {
path: 'myroutes/:id',
component: BarComponent
}, {
path: 'myroute/:id/:value',
component: FooComponent
}]
With this routing im getting a NavigationError: 通过此路由我得到一个NavigationError:
Cannot redirect to '/myroute/:id/:value'.
无法重定向到'/ myroute /:id /:value'。 Cannot find ':id'.
找不到':id'。
Changing the code to use fixed parameters in the redirectTo
route solves the error, but the parameters must be dynamic. 在
redirectTo
路由中更改代码以使用固定参数可以解决错误,但参数必须是动态的。
The routes are imported with RouterModule.forRoot()
. 使用
RouterModule.forRoot()
导入路由。
Hoping this is sufficient information, otherwise feel free to ask for more. 希望这是足够的信息,否则随时可以要求更多。 ;)
;)
Thanks for your help! 谢谢你的帮助! :)
:)
Change path for redirectTo
. 更改
redirectTo
路径。 You should prefix it with /
你应该在它前面添加
/
[{
path: 'myroutes/:id/:value',
redirectTo: '/myroute/:id/:value'
}, {
path: 'myroutes/:id',
component: BarComponent
}, {
path: 'myroute/:id/:value',
component: FooComponent
}]
You can create a simple Guard to redirect your old routes if nothing else works. 如果没有其他工作原理,您可以创建一个简单的Guard来重定向旧路由。
I think something like this should work: 我认为这样的事情应该有效:
app-routing.module.ts: APP-routing.module.ts:
[{
path: 'myroutes/:id/:value',
canActivate: [
forwarderGuard
]
}, {
path: 'myroutes/:id',
component: BarComponent
}, {
path: 'myroute/:id/:value',
component: FooComponent
}]
forwarder.guard.ts: forwarder.guard.ts:
@Injectable()
export class forwarderGuard implements CanActivate {
constructor(
private router: Router
) { }
canActivate(route: ActivatedRouteSnapshot) {
this.router.navigate([`myroute/${route.params['id']}/${route.params['value']}`]);
return false;
}
}
I've solved my problem. 我已经解决了我的问题。 The issue was that the parameter names in my app were written camelCase.
问题是我的应用程序中的参数名称是camelCase。 When the parameter are written lower case everything is allright.
当参数写成小写时,一切都很好。 :)
:)
Thanks for your help! 谢谢你的帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.