Angular 使用导航的路由 - children 和 loadChildren 不能一起使用

Question

我的主要组件模板如下所示：

<app-navigation></app-navigation>

<div class="container-fluid">
  <router-outlet></router-outlet>
</div>

这是导航：

   <div >
  <a routerLink="/home" routerLinkActive="active" >Home</a>
  <a  routerLink="/doctors" routerLinkActive="active" >
    Doctors
  </a>
  <a  routerLink="/health" routerLinkActive="active" >
    Health
  </a>
</div>

app.routing.ts

export const appRoutes: Routes = [

  {
    path: 'doctors',
    loadChildren: () => import('./doctore/doctore.module').then(m => m.DoctoreModule)
  },
  {
    path: 'health',
    loadChildren: () => import('./health/health.module').then(m => m.HealthModule),
  },
  {
    path: '**',
    component: NotFoundPageComponent
  }
];

医生组件有医生列表，选择其中一位后，该应用程序应路由到子组件 DoctorDetailsComponent，路径为 doctors/{id}

     <mat-cell [routerLink]="['/doctors', row.id]" routerLinkActive="active">
            {{row.description}} </mat-cell>

如果我把路由设置成这样：

  {
    path: 'doctors',
    loadChildren: () => import('./docspace/docspace.module').then(m => m.DocspaceModule),
    children: [{path: ':id', component: DoctorsDetailsComponent}]   
  },

我收到一个错误：

路由配置无效'doctors'：children和loadChildren不能一起使用

Answer 1

如果DoctorsDetailsComponent在DocspaceModule里面那么

{
    path: 'doctors',
    loadChildren: () => import('./docspace/docspace.module').then(m => m.DocspaceModule),   
  },

并在 DocspaceRoutingModule

 const routes: Routes = [
   {
     path: '',
     component: DoctorSpaceComponent,
     children: [
       { path: '', redirectTo: ':id', pathMatch: 'full' } 
       { path: ':id', component: DoctorsDetailsComponent }
     ]
   }
 ];

DoctorSpaceComponent.html

    <router-outlet></router-outlet>

Answer 2

我在具体模块routing ts中处理了

Angular 使用导航的路由 - children 和 loadChildren 不能一起使用

Angular Routing using navigation - children and loadChildren cannot be used together

routes

angular