0

我有一个角度为 6 的 SPA，当用户单击侧边菜单时，我试图导航到同级子级，但是在单击事件之后，它会引发错误。我只是在内部插座中更改显示的组件

Error: Cannot activate an already activated outlet

这是我的父模块

@NgModule({
schemas: [
imports: [
    CommonModule,
    HomeRoutingModule,
    MatDividerModule,
    MatListModule,
    MatSidenavModule,
    FooterModule,
    HeaderModule
],
providers: [],
declarations: [HomeComponent],
exports: [HomeComponent]
})

家长路线模块：

const routes: Routes = [
  { path: '', component: HomeComponent, canActivateChild: [AuthGuardService], children: [
    { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
    { path: 'dashboard', loadChildren: './dashboard/dashboard.module#DashboardModule' },
    { path: 'reports', loadChildren: './incident-reports/incident-reports.module#IncidentReportsModule' },
    { path: 'activities', loadChildren: './safety-activities/safety-activities.module#SafetyActivitiesModule' },
    { path: 'metrics', loadChildren: './monthly-metrics/monthly-metrics.module#MonthlyMetricsModule' }
  ]},
];

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

带有路由器链接的侧导航：

<mat-sidenav-container class="side-container">
  <mat-sidenav #sidenav opened="false">
    <mat-nav-list>
      <a mat-list-item routerLink="./dashboard" routerLinkActive="active-link"><i class="material-icons">dashboard</i>  Dashboard</a>
      <mat-divider></mat-divider>
      <a mat-list-item routerLink="./reports" routerLinkActive="active-link">Generate Incident Report</a>
      <mat-divider></mat-divider>
      <a mat-list-item routerLink="./activities" routerLinkActive="active-link">Safety Activities</a>
      <mat-divider></mat-divider>
      <a mat-list-item routerLink="./metrics" routerLinkActive="active-link">Monthly Metrics</a>
      <mat-divider></mat-divider>
      <a mat-list-item routerLink="./profile" routerLinkActive="active-link">Profile</a>
    </mat-nav-list>
  </mat-sidenav>

  <mat-sidenav-content>
    <router-outlet name="innerContainer"></router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>

和孩子的路线模块

const routes: Routes = [
  { path: '', component: IncidentReportsComponent, pathMatch: 'full', outlet: 'innerContainer' }
];

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

0 回答 0