Поведение ловушки жизненного цикла 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
) изменилось.