使用导航的角度路由 - children 和 loadChildren 不能一起使用答案

【问题标题】：Angular Routing using navigation - children and loadChildren cannot be used together使用导航的角度路由 - children 和 loadChildren 不能一起使用
【发布时间】：2021-10-20 22:28:09
【问题描述】：

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

<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
  }
];

Doctors 组件有一个医生列表，在选择其中一个时，应用应该路由到子组件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}]   
  },

我收到一个错误：

路由“医生”配置无效：children 和 loadChildren 不能一起使用

【问题讨论】：

看看这是否有帮助：stackoverflow.com/a/56756638/6513921

标签： angular routes

【解决方案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>

【讨论】：

【解决方案2】：

我在具体的模块路由ts中处理了。

【讨论】：