当用户单击编辑按钮时,我将url更改为/posts/(modal:1/edit) which displays a modal dialog. I need to access the query params of that route to get the id of the post. Params are always an empty object. Whenever I look through the browser console. I see
路由器Event: ActivationEnd`三次。第一次和最后一次,params对象是空的,但是第二次它有我需要的值。
为什么Router Event: ActivationEnd
会显示这么多次?
只运行一次ngOnInit
日志,这意味着组件只挂载一次。
有什么想法吗?
这就是我改变路线的方式
`
this.router.navigate([{outlets: {modal: `${this.post.postID}/edit`}}], {relativeTo: this.route});
`
以下是我的路线:
`
{ path: 'new', component: PostItDialogContainerComponent, outlet: 'modal' },
{ path: ':id/edit', component: PostItDialogContainerComponent, outlet: 'modal' },
`
PostItDialogContainerComponent
只需调用DialogService
来打开模式
`
ngOnInit() {
console.log("Inside of post it dialog container");
this.postItDialog.openPostItDialog(this.dialog);
}
`
我的路由器插座在同一个app.component.html
级别上
`
<main>
<router-outlet></router-outlet>
<router-outlet name="modal"></router-outlet>
</main>
`
这是ngOnInit
中的模式对话框
`
this.route.params
.subscribe(
(params) => {
this.postID = params['id'];
this.params = params;
this.editMode = params['id'] != null;
this.initForm();
console.log("PARAMS ID IS: ", params['id']);
}
);
`
我知道我漏掉了什么,但我不能准确地指出它。提前感谢
发布于 2019-03-26 19:30:08
解决方案最终比我希望的更加复杂,但这是我获得辅助路线参数的唯一方法。对this.route.params.subscribe()的所有其他调用都是作为空对象出现的。
在ngOnInit中,我有以下代码:
`
this.route.firstChild
.children
.filter(routes => routes.outlet == 'modal')
.map(r => r.params.subscribe(
(params) => {
this.editMode = params['id'] != null
this.postID = +params['id']
}
))
`
这将查看ActivatedRoute,然后检查其firstChild ActivatedRoute,然后检查是否有任何带有“modal”出口的子项。然后,我们映射每个ActivatedRoute并订阅它们的参数,以检索id和模式。
https://stackoverflow.com/questions/55348075
复制相似问题