重新加载 Angular 子组件将用户带到 localhost:4200答案

【问题标题】：Reloading Angular children component takes user to localhost:4200重新加载 Angular 子组件将用户带到 localhost:4200
【发布时间】：2020-05-10 19:44:33
【问题描述】：

在我的 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 来渲染子组件。即使用户从子组件重新加载应用程序，我也希望保持相同的路线。

【问题讨论】：

Route project-setup/project-setup-steppers 在您的应用程序路由中不存在。也许您正在使用 null projectId 调用 project-setup/project-setup-steppers/:projectId ？
它可能会也可能不会接受 projectId。如果我不从子组件重新加载页面，这两种情况都适用。
父路由已经有AuthenticationGuardService。为什么要在子路由中再次使用？
如果参数是可选的，则必须指定有无参数的路由

标签： javascript angular angular-ui-router

【解决方案1】：

将此添加到您的应用程序路由文件中

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

如果需要可选参数，则必须定义带有和不带参数的路由。

【讨论】：