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

对于延迟加载角度，请阅读：https://angular.io/guide/lazy-loading-ngmodules

您应该为员工创建功能模块。
然后创建单独的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: 'Leaves' }
 },
];

@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 {}

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

1 个答案: