Блог

Когда пользователь нажимает кнопку редактирования, я меняю 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']);                  
        }
      );
`
  

Я знаю, что здесь чего-то не хватает, но я не могу точно указать это. Заранее спасибо

Решение оказалось более запутанным, чем я надеялся, но это был единственный способ, которым я мог получить параметры вспомогательного маршрута. Все остальные вызовы 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 и подписываемся на их параметры, чтобы получить идентификатор и режим.

Это должно работать должным образом, когда вы вводите ActivatedRoute в компонент, на который указывает вспомогательный маршрут (ваши фрагменты кода не показывают, какой экземпляр ActivatedRoute вы использовали.)

Объяснение:

ActivatedRoute не является глобальным синглтоном, и компоненты из разных маршрутизаторов будут получать разные экземпляры ActivatedRoute, в зависимости от «их» маршрута, даже при одновременном отображении. В частности, параметры из дочерних маршрутов не видны в ActivatedRoute их родительских компонентов (что имеет смысл: у родительского может быть более одного вложенного выхода, что открывает возможность столкновения имен вспомогательных параметров).

Итак, чтобы получить параметры из вспомогательного маршрута, вам нужно посмотреть на экземпляр ActivatedRoute, введенный в компонент вспомогательного маршрута. Если вам нужно распространить значение обратно на родительский компонент, вам, вероятно, придется делать это вручную (например, через общую службу).