Angular嵌套懒加载路由问题：根路径未正确显示HomeComponent

我希望在根路径（/）展示HomeComponent，该组件内的router-outlet用于加载子路由内容。配置嵌套路由与懒加载后，访问localhost/时仅显示UsersListComponent，而非HomeComponent嵌套该子组件；但访问localhost/users时可正常显示HomeComponent及嵌套的UsersListComponent。

相关代码 #

HomeComponent.html #

<header>
 <div>
  <h1>CommunityPost</h1>
 </div>
 <button mat-raised-button color="primary" (click)="onLogout()">Log Out</button>
</header>
<mat-divider></mat-divider>
<main>
 <nav mat-tab-nav-bar  [tabPanel]="tabPanel">
  <a mat-tab-link routerLink="/users" (click)="activeLink = '/users'" 
   [active]="activeLink == '/users'" > COMMUNITY</a>
  <a mat-tab-link routerLink="/posts" (click)="activeLink = '/posts'" 
   [active]="activeLink == '/posts'" > POSTS </a>
 </nav>
 <mat-tab-nav-panel #tabPanel>
  <router-outlet></router-outlet>
 </mat-tab-nav-panel>
</main>

app-route路由配置 #

const routes: Routes = [
{path: '', component: HomeComponent, canActivate: [guardGuard], children:[
 {path: 'posts', loadChildren: () => import('./posts/posts.module').then(m => 
        m.PostsModule)},
 {path: 'users', loadChildren: () => import('./user/user.module').then(m => 
        m.UserModule)},
 {path: '', redirectTo: 'users', pathMatch: 'full'},
  ]},
{path: 'login', component: LoginComponent},
{path: '**', component: NotFoundComponent},
 ];

users-route路由配置 #

const routes: Routes = [
   {path: '', component: UsersListComponent}, 
   {path: 'users/:id', component: UserDetailComponent},
  ];

HomeComponent.ts #

import { Component } from '@angular/core';
import { NavigationEnd, Router } from '@angular/router';


@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrl: './home.component.css'
})
export class HomeComponent {
  activeLink: string 

constructor(private router: Router){
    this.router.events.subscribe((data: NavigationEnd)=> {
      if(data.url !== undefined){
        this.activeLink=data.url
      }
    })
  }

  onLogout(){
    if(window.confirm('You are logging out. Are you sure?')){
      localStorage.removeItem('auth')
      window.location.reload()  
    }
  }
}

问题核心在于路由层级错误和重定向时的组件匹配逻辑，以下是具体修复步骤：

1. 修正User模块的路由层级 #

当前users-route中的path: 'users/:id'会导致路由路径变成/users/users/:id，属于重复层级，这会干扰根路径重定向时的组件渲染逻辑。修改为：

const routes: Routes = [
   {path: '', component: UsersListComponent}, 
   {path: ':id', component: UserDetailComponent}, // 移除多余的"users/"前缀
];

这样访问/users/1时，会正确匹配UserDetailComponent，同时确保/users路径对应UsersListComponent，且嵌套在HomeComponent内部。

2. 确保根路由的嵌套渲染逻辑 #

当前根路由配置本身逻辑正确，但需要确认AppComponent的模板中仅包含<router-outlet></router-outlet>，没有额外的组件渲染干扰。

如果修复后仍有问题，可以调整根路由的子路由顺序，将重定向规则放在最后（Angular路由匹配是从上到下的，确保具体路由先被匹配）：

const routes: Routes = [
  {
    path: '',
    component: HomeComponent,
    canActivate: [guardGuard],
    children: [
      { path: 'posts', loadChildren: () => import('./posts/posts.module').then(m => m.PostsModule) },
      { path: 'users', loadChildren: () => import('./user/user.module').then(m => m.UserModule) },
      { path: '', redirectTo: 'users', pathMatch: 'full' },
    ]
  },
  { path: 'login', component: LoginComponent },
  { path: '**', component: NotFoundComponent },
];

完成以上修改后，访问根路径/时，Angular会先渲染HomeComponent，再通过其内部的router-outlet加载UsersListComponent，与访问/users时的效果一致。

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