Поведение ловушки жизненного цикла ngOnInit с модулем маршрутизации?

Я использую следующие маршруты в корневом модуле маршрутизации моего приложения:

const routes: Routes = [
  {
    path: '',
    children: [
      {
        path: 'home',
        component: HomeDetailsComponent,
      },
      {
        path: 'home',
        component: HomeDetailsComponent,
        children: [
          {
            path: 'room/:id', 
            component: RoomDetailsComponent,
          },
        ]
      },
      {
        path: 'sectorNumber',
        component: SectorNumberComponent
      },
      {
        path: '**',
        redirectTo: 'home',
      },
    ]
  }
];

Теперь внутри HomeDetailsComponent я использую ловушку жизненного цикла OnInit для вызова метода http get и на основании этого выполняю некоторую обработку событий. Однако я заметил, что при такой маршрутизации мой HomeDetailsComponent инициализируется дважды. Однажды, когда я перейду к 'http://localhost:3000/#/curriculum/' и второе, когда я перейду к 'http://localhost:3000/#/curriculum/chapter/1' маршрут. Может кто-нибудь сказать мне, почему это происходит?

1 ответ

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

Другие вопросы по тегам