Перезагрузка Angular дочернего компонента переносит пользователя на локальный хост: 4200 - PullRequest
Новая
       3

Перезагрузка Angular дочернего компонента переносит пользователя на локальный хост: 4200

3 голосов
/ 24 января 2020

В моем приложении Angular есть несколько дочерних компонентов, которые могут принимать параметры маршрута. Я могу легко перенаправить эти дочерние компоненты из родительского, но когда я перезагружаю дочерний компонент, приложение переходит на localhost:4200 и выдает ошибку маршрутизации, как показано ниже. 

Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'project-setup/project-setup-steppers'

Вот мои конфигурации маршрутизации: 

const routes: Routes = [
  { path: 'dashboard', component: DashboardComponent, canActivate: [AuthenticationGuardService] },
  { path: 'project-setup', component: ProjectSetupComponent, canActivate: [AuthenticationGuardService] ,
    children: [
    {
      path: 'project-setup-steppers/:projectId',
      component: ProjectSetupSteppersComponent,
      canActivate: [AuthenticationGuardService]
    },
    {
      path: 'selfs', component: SelfsComponent, canActivate: [AuthenticationGuardService],
      children: [
        {
          path: 'raters/:selfUserId/:formSetUpKey',
          component: RatersComponent, canActivate: [AuthenticationGuardService]
        }
      ]
    },
  ]},
  { path: 'participant-setup', component: ParticipantSetupComponent, canActivate: [AuthenticationGuardService] },
  { path: 'launch-and-status', component: LaunchStatusComponent, canActivate: [AuthenticationGuardService] },
  { path: 'launch-project-desc', component: LaunchProjectDescriptionComponent, canActivate: [AuthenticationGuardService] },
  { path: 'question-setup', component: QuestionSetupComponent, canActivate: [AuthenticationGuardService] },
  { path: 'email-setup', component: EmailSetupComponent, canActivate: [AuthenticationGuardService] },
  { path: 'participant-steppers', component: ParticipantSteppersComponent, canActivate: [AuthenticationGuardService], children: [] },
  {
    path: 'report-project-list', component: ReportProjectListComponent, canActivate: [AuthenticationGuardService],
    children: [
      {
        path: 'report-project-detail-list/:projectId',
        component: ReportProjectDetailListComponent, canActivate: [AuthenticationGuardService]
      }
    ]
  },

  { path: 'report-detail/:id/:type', component: ReportDetailComponent, canActivate: [AuthenticationGuardService] },
  { path: 'trial/:projectId', component: TrailRunProjectComponent, canActivate: [AuthenticationGuardService] },
  { path: 'status-of-project/:projectId', component: StatusOfProjectComponent, canActivate: [AuthenticationGuardService] },
  { path: 'project-status-details', component: ProjectStatusDetailsComponent, canActivate: [AuthenticationGuardService] },
  { path: 'news', component: NewsComponent, canActivate: [AuthenticationGuardService] },
  { path: 'view-responses/:assigneeId', component: ViewProjectResponsesComponent, canActivate: [AuthenticationGuardService] },
  { path: 'copy-project/:projectId', component: CopyProjectComponent, canActivate: [AuthenticationGuardService] }

];

Я использую вложенные router-outlet в родительских компонентах для визуализации дочернего компонента. Я хочу остаться на том же маршруте, даже если пользователь перезагружает приложение из дочернего компонента.

1 Ответ

3 голосов
/ 24 января 2020

Добавьте это в свой файл маршрутизации приложения. 

      ...
      },
      {
        path: 'report-project-detail-list',
        component: ReportProjectDetailListComponent, canActivate: [AuthenticationGuardService]
      }

Вы должны определить маршрут с параметром и без него, если он вам нужен.

...