Angular router.navigate не работает от родительского компонента к дочернему компоненту

Question

в моем случае я успешно перешел из доступного компонента - в -> резервный компонент. но когда я пытаюсь перейти к подтвердить компонент, riuter.navigate не работает

я пытаюсь перенаправить на подтверждение компонент с помощью этого кода:

onContinuePayment() {
    // this.router.navigated = false;
    debugger
    this.router.navigate(['flight/confirm'], {
      queryParams: {
        source: 'g'
      }
    });
  }

и мой модуль маршрутизации:

const routes: Routes = [
  {
    path: '' , component: FlightComponent,
    children: [
        {
          path: 'available',
          component: AvailableFlightsComponent
        } ,
        {
          path: 'reserve',
          component: ReserveFlightComponent
        } ,
        {
          path: 'confirm',
          component: ReserveConfirmComponent
        } ,
        {
          path: 'reserve-confirm',
          component: ReserveConfirmationComponent
        }
      ]
  }];

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

но это не работает

Answer 1

Вы должны использовать

this.router.navigate(['/flight/confirm'], {
  queryParams: {
    source: 'g'
  }
});

С уважением.

Answer 2

Пожалуйста, попробуйте это

this.router.navigate(['confirm'], {
      queryParams: {
        source: 'g'
      }
    });

Answer 3

path: '' , component: FlightComponent

должно быть

path: 'flight' , component: FlightComponent

Ваше намерение здесь состоит в том, чтобы установить маршруты для URL /flight/{child}, где {child} является одним из available, reserve, confirm и др. c.

Предполагая, что вы также хотите, чтобы компонент полета обслуживался для URL /flight, назначение пути flight родительскому маршруту будет означать, что дочерние маршруты эффективно наследуют префикс /flight/ для своих paths.

Если вы не хотите, чтобы компонент полета был связан с URL /flight, вы можете вставить маршрут без компонента между полетом и его дочерними элементами:

const routes: Routes = [
  {
    path: '' , component: FlightComponent,
    children: [
      { path: 'flight', children: [
        {
          path: 'available',
          component: AvailableFlightsComponent
        } ,
        {
          path: 'reserve',
          component: ReserveFlightComponent
        } ,
        {
          path: 'confirm',
          component: ReserveConfirmComponent
        } ,
        {
          path: 'reserve-confirm',
          component: ReserveConfirmationComponent
        }
      ] }    
    ]
}];