Question

当用户单击“编辑”按钮时，我将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路由器事件：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']);                  
        }
      );
`

我知道我在这里遗漏了一些东西，但是我无法指出。预先感谢

Answer 1

最终，解决方案变得比我希望的要复杂得多，但这是我获得辅助路线参数的唯一方法。对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，然后检查具有“模态”出口的所有子级。然后，我们映射每个ActivatedRoute并订阅其参数以检索ID和模式。

ActivatedRoute不包含辅助路线中的任何参数

1 个答案: