Ребята в роутинге не показывают страницу Angular

Question

Я работаю с маршрутизацией в Angular 8. Я пытаюсь сделать роутер в роутере, что означает использование детей. Первая маршрутизация работает, но вторая получает правильный URL, но страница не изменяется.

    const routes: Routes = [
      {
        path: "", 
        component: Component
      },
{
        path: "things", 
        component: Component1
      },
      {
        path: "partA/:id",
        component: Component2,
        children: [
          {
              path: 'partB/:id',
              component: Component3
          }]


        }
        ];

    @NgModule({
      imports: [RouterModule.forRoot(routes), RouterModule.forChild(routes)],
      exports: [RouterModule]
    })

в Component1.ts (работает)

this.router.navigate(["partA" + item['name']], {state: {data: item}})

в Component2.ts:

 this.router.navigate(["partA/partB" + item['name']], {state: {data: item}})

В этом случае URL-адрес в браузере в порядке, и я не получаю никакой ошибки, но страница по-прежнему Component2, любые изменения. И я добавил <router-outlet></router-outlet> в Component1 и Component2.

Я тоже пробовал это, но у меня возникла та же проблема

{
     path: "house/character/:id",
     component: InfoCharacterComponent
   },

Answer 1

Поскольку он определен как дочерний, ваш URL-адрес маршрута будет выглядеть примерно так: partA/:id/partB/:id, тогда как вы пытаетесь указать this.router.navigate(["partA/partB" + item['name']], {state: {data: item}}), что соответствует partA/partB/:id, который не существует.

Ваше решение - изменить маршрут или позвонить navigate с указанным форматом.

Answer 2

Если partA:id доступно в partB, вы можете использовать его, как показано ниже. Это будет работать с вашим примером маршрута.

this.router.navigate(["partA/" + partAid + "/partB" + item['name']], {state: {data: item}})