Angular路由异常：父组件无法渲染子组件求助

核心问题定位 #

你的路由配置存在层级匹配错误：report-list.module.ts中使用了绝对路径定义子路由，但该模块是懒加载在app/parent/:param父路由下的，子路由必须使用相对路径才能让Angular正确关联到reports.component.html中的<router-outlet>。

具体修复步骤 #

1. 修正子模块路由配置 #

修改report-list.module.ts中的路由路径，去掉app/parent前缀，使用相对父路由的路径：

const routes: Routes = [   
  { path: 'report1', component: Report1Component },   
  { path: 'report2', component: Report2Component },
  { path: 'report3', component: Report3Component },
  { path: 'report4', component: Report4Component } 
];

@NgModule({   
  declarations: [],   
  imports: [
    Report1Module,
    Report2Module,
    Report3Module,
    Report4Module,
    RouterModule.forChild(routes)   
  ] 
})
export class ReportListModule {} // 补充模块导出，你的代码中遗漏了这部分

2. 补全父路由组件关联 #

app.routing.module.ts中的app路由未指定对应组件，导致Shell无法通过路由加载，需要补充：

{
  path: 'app',
  component: ShellComponent, // 关联Shell组件
  children: [
    { path: 'parent/:param', loadChildren: () => import('./report-list.module').then(m => m.ReportListModule) },
  ]
}

3. 调整根组件的路由出口 #

app.component.html不应直接渲染<shell>，而是使用根路由出口加载路由匹配的组件：

<router-outlet></router-outlet> <!-- 根路由出口，自动加载app路由对应的ShellComponent -->

4. 修正导航路径 #

父路由parent/:param需要传入参数值，导航时要带上该参数：

// 替换为你的实际param值
const targetParam = 'report-group';
this.router.navigate(['/app/parent', targetParam, 'report1'], { queryParams: params}); 
this.router.navigate(['/app/parent', targetParam, 'report2'], { queryParams: params});  
this.router.navigate(['/app/parent', targetParam, 'report3'], { queryParams: params});       
this.router.navigate(['/app/parent', targetParam, 'report4'], { queryParams: params});

验证要点 #

1. 访问/app/parent/你的参数值/report1，检查URL是否正常匹配
2. 查看浏览器控制台是否存在路由错误提示
3. 确认Report1-4组件已在各自模块中正确声明，且模块已导入到ReportListModule

内容的提问来源于stack exchange，提问作者Nithin