[英]Angular - Router Config - redirectTo using parameters/variable segment
In the example routing configuration below, I'm receiving a Error: Cannot redirect to '/ip/:id'. 在下面的示例路由配置中,我收到一个错误:无法重定向到'/ ip /:id'。 Cannot find ':id' when entering localhost:8080\\sso\\ip\\1.
输入localhost:8080 \\ sso \\ ip \\ 1时找不到':id'。 I'm trying to understand how to redirect using variable segments of the path.
我试图了解如何使用路径的可变段进行重定向。 In this case :id cannot seem to be found.
在这种情况下,:id似乎找不到。 I referenced https://vsavkin.com/angular-router-understanding-redirects-2826177761fc which describes a similar use case where a dynamic segment is used within a redirectTo property.
我引用了https://vsavkin.com/angular-router-understanding-redirects-2826177761fc ,它描述了一个类似的用例,其中在redirectTo属性中使用了动态段。
Does the id get resolved using the :id parameter from the initiated /sso/ip/ :id route? 使用启动的/ sso / ip / :id路由中的:id参数可以解析id吗? A similar question was asked, but never responded to: https://groups.google.com/forum/#!topic/angular/Mw0N3qYphO8 .
有人提出了类似的问题,但从未答复: https : //groups.google.com/forum/# ! topic/angular/Mw0N3qYphO8 。
Any assistance is much appreciated? 非常感谢您的协助?
const appRoutes: Routes = [
{
path: 'ip',
children: [
{
path: ':id',
children: [
{
path: 'tcv',
component: IpTcvComponent
},
{
path: '',
component: IpComponent
}
]
},
{
path: '',
component: IpHomeComponent
}
]
},
{
path: 'sso',
children: [
{
path: 'ip',
children: [
{
path: ':id',
children: [
{
path: 'tcv',
pathMatch: 'full',
redirectTo: '/ip/:id/tcv'
},
{
path: '',
pathMatch: 'full',
redirectTo: '/ip/:id'
}
]
},
{
path: '',
pathMatch: 'full',
redirectTo: '/ip'
}
]
}
]
}
];
My approach would be to handle redirection manually if I can't get the routes config to work. 如果无法使路由配置正常工作,我的方法是手动处理重定向。 Have a
RedirectService
with a redirectInFlight()
method that listens to the Router.events
observable. 具有带有
redirectInFlight()
方法的RedirectService
,该方法侦听可观察到的Router.events
。 When the router tries to go to a target path such as /sso/ip/:id
, transparently redirect to the right path: /ip/:id
当路由器尝试转到目标路径(例如
/sso/ip/:id
,透明地重定向到正确的路径: /ip/:id
I would then add the service to AppModule.providers
, inject the service in AppComponent
, and call redirectInFlight()
然后,我将服务添加到
AppModule.providers
,将服务注入AppComponent
,并调用redirectInFlight()
AppComponent AppComponent
@Component({
templateUrl: 'app.component.html'
})
export class AppComponent implements OnInit {
//inject the RedirectService
constructor(private redirectSvc:RedirectService){}
//start listening to the router and redirecting
ngOnInit() {this.redirectSvc.redirectInFlight();}
}
RedirectService RedirectService
import {Injectable} from '@angular/core';
import {Router} from '@angular/router';
import 'rxjs/Rx'; //replace with just the classes you need from RxJS library
@Injectable()
export class RedirectService {
events$:Observable<any>; //stream of Router events
constructor(private router:Router) {
this.events$ =
//listen to router events and inspect the `url` string property
//and filter for urls that begin with /sso
this.router.events.filter(e=> e.url && e.url.startsWith('/sso'))
}
redirectInFlight(){
//First remove /sso from the start of url to fix it
this.events$.map(e => e.url.replace('/sso',''))
//navigate to the fixed URL
.subscribe(newUrl=>this.router.navigateByUrl(newUrl));
}
}
Finally, you can remove the whole sso
path and its children paths from your router config, simplifying it a great deal. 最后,您可以从路由器配置中删除整个
sso
路径及其子路径,从而大大简化了配置。
Note: This implementation is a starting point. 注意:此实现是一个起点。 You can make it more robust by storing and referring to a map of redirections, instead of hardcoding "/sso".
您可以通过存储和引用重定向映射而不是对“ / sso”进行硬编码来使其更加健壮。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.