угловая маршрутизация - перейдите к тому же компоненту с дополнительными параметрами, не разрушая компонент

У меня есть настройка маршрутизации, как это

{
    path: '',
    component: BaseCmp,
    children: [
        { path: 'list', component: ListCmp },
        {
            path: 'list/:itemId',
            component: ListItemCmp,
        },
        {
            path: 'list/:itemId/:subNavItemId',
            component: ListItemCmp,
        }
    ]
}

Я выбираю элемент из ListCmp и перехожу, например, к «списку/123».

В конструкторе ListCmp/OnInit я извлекаю некоторые данные с помощью :itemId, и он возвращает список SubNavItems, из которого в качестве параметров следует добавить идентификатор первого SubNavItem (для выделения routerLinkActive и других целей выборки).

constructor(route:ActivatedRoute, http:HttpClient, router:Router){
   let id = route.params.itemId
   http.get(.../id).subscribe(list => {
        // add id of first item of list to params
        this.router.navigate(['list', id, list[0].id, {replaceUrl:true}]
   })
}

Это приведет к уничтожению текущего ListItemCmp и созданию нового экземпляра ListItemCmp. Как я могу предотвратить это? Я попробовал метод location.go(), но он не активирует routerLinkActive.


angular angular-routing angular-routerlink angular-router
person Han Che    schedule 21.11.2018    source источник
comment
'list/:itemId/:subNavItemId' должен быть потомком 'list/:itemId' : из-за этого ваша маршрутизация создает два экземпляра одного и того же класса, но должна уничтожить их, чтобы перейти к URL-адресу. Сделайте его дочерним по отношению к первому маршруту, тогда ваш компонент больше не должен уничтожаться.   -  person    schedule 21.11.2018
comment
спасибо, я так и сделал, если вы напишите ответ, я могу проверить это   -  person Han Che    schedule 21.11.2018

Ответы (2)


arrow_upward
0
arrow_downward

Следуя моему комментарию, ваша ошибка исходила из того факта, что ваши маршруты были братьями и сестрами, а не родителями: отходя от первого брата, вы уничтожали его, чтобы создать другого брата.

С родительскими маршрутами родитель останется (поскольку он содержит выход маршрутизатора и не может исчезнуть), а дочерний будет добавлен к родителю, то есть родитель не будет уничтожен.

person Community    schedule 21.11.2018

arrow_upward
0
arrow_downward

вы можете использовать параметры запроса вместо жесткой маршрутизации

    constructor(route: ActivatedRoute) {
    let id = route.params.itemId
    http.get(.../id).subscribe(list => {
        // add id of first item of list to params
        this.router.navigate(['list', id], { queryParams: { subNavItemId: list[0].id } })
    })
    this.activatedRoute.queryParamMap.subscribe(query => {
      if (query['params']['subNavItemId']) {
        // perform some action
      }
    });
  }

В вашем маршрутизаторе теперь вы можете удалить "list/:itemId/:subNavItemId"

{
    path: '',
    component: BaseCmp,
    children: [
        { path: 'list', component: ListCmp },
        {
            path: 'list/:itemId',
            component: ListItemCmp,
        },
        // you can remove below route
// {
         //    path: 'list/:itemId/:subNavItemId',
         //    component: ListItemCmp,
       //  }
    ]
}
person Thomsheer Ahamed    schedule 21.11.2018
comment
Это не отвечает на вопрос, который обеспечивает обходной путь для проблемы. - person ; 21.11.2018