问题与具有不同路由器出口的多个子组件

Question

该应用的路由运行正常。只是围绕组件的角寿命周期进行一些额外的日志记录，当我点击URL /employee/1并切换到employee/1/leaves时，实际上它破坏了/重新创建了EmployeeComponent，这显然是如何解决的问题我写了路线。

  routes = [ 
      {
        path: 'employee/:employeeId',
        component: EmployeeDetailComponent,
        children: [
          {path: '', component: EmployeeNavbarComponent, outlet: 'navbar-options'}
        ]
      },
    {
        path: 'employee/:employeeId/leaves',
        component: EmployeeDetailComponent,
        children: [
          {path: '', component: NavbarComponent, outlet: 'navbar-options'},
          {path: '', component: LeaveComponent, outlet: 'main-content'}
        ]
      }
    ]

因此，我尝试按照以下方式修复路线，并陷入这个问题，我不明白这里出了什么问题，我搜索了一些文章，然后像我一样做。就我而言，唯一的区别是两个不同的路由器出口。

core.js:6014 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: '404'
Error: Cannot match any routes. URL Segment: '404'```


      {
        path: 'employee/:employeeId',
        component: EmployeeDetailComponent,
        children: [
          {path: '', component: EmployeeNavbarComponent, outlet: 'navbar-options'},
          {path: 'leaves', component: LeaveComponent, outlet: 'main-content'}
        ]
      }

有帮助吗？

Answer 1

对于延迟加载Angular读取：https://angular.io/guide/lazy-loading-ngmodules

1. 您应该为员工创建功能模块。
2. 然后创建单独的EmployeeRountingModule（employee.rounting.module.ts）的新创建EmployeeModule（employee.module.ts）。

EmployeeRountingModule（employee.rounting.module.ts）

const routes: Routes = [
 {
   path: 'view/:id',
   component: EmployeeProfileComponent,
   canActivate: [AuthGuardService],
   data: { title: 'Profile' }
 },
 {
   path: ':id/leaves',
   component: EmployeeLeavesComponent,
   canActivate: [AuthGuardService],
   data: { title: 'Edit Rules' }
 },
];

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

EmployeeModule（employee.module.ts）

@NgModule({
  declarations: [
    EmployeeProfileComponent,
    EmployeeLeavesComponent
  ],
  imports: [
    EmployeeRountingModule
  ]
})
export class EmployeeModule {}

和AppRoutingModule（app.routing.module.ts）

const routes: Routes = [
  {
    path: '',
    component: AppComponent,
    canActivate: [AuthGuardService],
    children: [
      {
        path: '',
        redirectTo: 'dashboard'
      },
      {
        path: 'dashboard',
        component: DashboardComponent,
        canActivate: [AuthGuardService]
      },
      {
        path: 'employees',
        loadChildren: () =>
          import('../home/employee/employee.module').then(mod => mod.EmployeeModule)
      },
    ]
  }
];

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