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

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

0 голосов
/ 21 ноября 2018

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

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

Я выбираю элемент из ListCmp и перехожу к примеру «list / 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

Ответы [ 2 ]

0 голосов
/ 21 ноября 2018

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

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

0 голосов
/ 21 ноября 2018

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

    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,
       //  }
    ]
}
...