我创建了一个示例 Plunker,将多个参数传递到下一页,但它不起作用。这是 Plunker 演示,其中单击项目后危机中心路由不起作用。
http://plnkr.co/edit/ngNSsKBzAuhaP0EjKVJX?p=preview http://plnkr.co/edit/ngNSsKBzAuhaP0EjKVJX?p=preview
onSelect(crisis: Crisis) {
// Navigate with Absolute link
//this.router.navigate(['/crisis-center', 1]); //this is working.
this.router.navigate(['/crisis-center', { id: '1', id2:'2'}]); //this is not working
}
//以下是路线:
//{ path: 'crisis-center/:id', component: CrisisDetailComponent } //-- this is working
{ path: 'crisis-center/:id /:id2', component: CrisisDetailComponent}, // this is not working
ngOnInit() {
this.sub = this.route
.params
.subscribe(params => {
let id = +params['id'];
let id2 = +params['id2']; //Unable to read id and id2 values
this.service.getCrisis(id)
.then(crisis => {
if (crisis) {
this.editName = crisis.name;
this.crisis = crisis;
} else { // id not found
this.gotoCrises();
}
});
});
}
我有三层导航,从危机中心移动到危机详细信息,然后从危机详细信息 -> 交易详细信息。因此,在导航到危机详细信息后,我想传递 CrisisId 和 CrisisdetailId 以遍历回详细信息,然后返回危机列表。
我试图在这里传递多个参数。
另外,我想隐藏浏览器 URL 中的 URL 参数并显示别名,以前使用的“as”关键字现在不起作用。
使用 Router 组件(来自'@角度/路由器',不是来自'@角度/路由器已弃用'),您可以按如下方式传递多个参数:
this.router.navigate(['/crisis-center', 1, 2]);
你试图这样做:
this.router.navigate(['/crisis-center', { id: '1', id2:'2'}]); //this is not working
因为您已传递一个对象作为第二个参数,所以您传递的是查询参数而不是路由器参数。所以,它的 URL 是:
localhost:3000/crisis-center;id=1&id2=2
你可以在这里读更多关于它的内容:https://angular.io/docs/ts/latest/guide/router.html#!#query-parameters https://angular.io/docs/ts/latest/guide/router.html#!#query-parameters
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)