Angular新手咨询：如何实现默认加载嵌套组件同时渲染Home Module父组件内容

当然可行！这正是Angular嵌套路由要解决的典型场景，我来帮你一步步搞定它。你当前的问题核心是没通过嵌套路由的方式配置Home模块，导致默认路由直接替换了Home组件的渲染，而非把Index组件嵌套在Home组件内部。

1. 给Home组件添加路由出口 #

打开home.component.html，在你想要展示Index组件内容的位置，添加<router-outlet>标签——这是Angular用来渲染子路由组件的“容器”。示例如下：

<!-- home.component.html -->
<div class="home-wrapper">
  <!-- 这里放Home模块的公共内容，比如模块专属导航、通用提示等 -->
  <div class="home-header">Home模块公共头部</div>
  
  <!-- Index组件会被渲染到这个router-outlet里 -->
  <router-outlet></router-outlet>
  
  <!-- 也可以加公共底部 -->
  <div class="home-footer">Home模块公共底部</div>
</div>

2. 配置Home模块的嵌套路由 #

修改home-routing.module.ts，使用children数组定义子路由，并把Index组件设为默认子路由。代码示例：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home.component';
import { IndexComponent } from './index/index.component';

const routes: Routes = [
  {
    path: '', // 对应App路由指向Home模块的路径
    component: HomeComponent, // 先渲染Home父组件
    children: [
      { path: '', component: IndexComponent }, // 默认子路由，自动加载Index组件
      // 后续你还能在这里加其他子路由，比如 { path: 'settings', component: SettingsComponent }
    ]
  }
];

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

3. 确认根路由的配置（如果懒加载Home模块） #

如果你的App是通过懒加载引入Home模块，app-routing.module.ts的配置应该类似这样（直接导入Home模块的话可跳过这步）：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path: '',
    loadChildren: () => import('./home/home.module').then(m => m.HomeModule)
  },
  // 其他根路由配置...
];

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

效果说明 #

配置完成后，用户访问根路径''时：

1. 先匹配App路由的Home模块规则，加载Home模块
2. Home模块的父路由匹配成功，渲染HomeComponent
3. 父路由的默认子路由自动激活，把IndexComponent渲染到Home组件内部的<router-outlet>中
4. 最终页面会同时展示Home模块的公共内容和Index组件的专属内容，完全符合你的需求

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