Angular 4路由：嵌套子路由实现求助

我来帮你搞定Angular 4的嵌套子路由问题！你遇到的同一页面显示两个界面的问题，大概率是路由配置层级错误或者组件内<router-outlet>的使用方式不对导致的，咱们一步步梳理解决：

1. 先理清楚嵌套路由的核心逻辑 #

嵌套路由的关键是：父路由对应的组件模板中必须包含一个<router-outlet>，用来渲染它的子路由组件。当你访问claim/1时，ClaimDashboardComponent会被渲染到根路由的<router-outlet>里；而它内部的子路由组件（比如详情页），则会渲染到ClaimDashboardComponent自己模板里的<router-outlet>中，这样就不会出现两个界面同时显示的情况。

2. 修正路由配置 #

首先检查你的路由配置，确保子路由是定义在父路由的children数组内，而不是顶级路由。正确的配置应该是这样的：

// app-routing.module.ts
import { Routes, RouterModule } from '@angular/router';
import { ClaimDashboardComponent } from './claim-dashboard/claim-dashboard.component';
import { ClaimDetailsComponent } from './claim-details/claim-details.component';
import { ClaimOverviewComponent } from './claim-overview/claim-overview.component';

const routes: Routes = [
  {
    path: 'claim/:id',
    component: ClaimDashboardComponent,
    // 子路由必须放在children数组里
    children: [
      // 默认子路由：访问claim/1时，自动加载Overview组件
      { path: '', redirectTo: 'overview', pathMatch: 'full' },
      { path: 'overview', component: ClaimOverviewComponent },
      { path: 'details', component: ClaimDetailsComponent }
      // 可以继续添加更多子路由
    ]
  }
];

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

3. 调整父组件模板结构 #

在ClaimDashboardComponent的模板中，你需要保留自己的页面内容（比如导航模块），然后在合适的位置添加<router-outlet>，专门用来渲染子路由组件。示例如下：

<!-- claim-dashboard.component.html -->
<div class="claim-dashboard-container">
  <!-- 这是父组件自己的内容：比如导航菜单 -->
  <div class="dashboard-nav">
    <h3>理赔控制台</h3>
    <!-- 使用相对路径的routerLink，指向子路由 -->
    <a [routerLink]="['overview']" routerLinkActive="active">概览</a>
    <a [routerLink]="['details']" routerLinkActive="active">详情</a>
  </div>

  <!-- 这个router-outlet是子路由组件的渲染容器 -->
  <div class="child-content">
    <router-outlet></router-outlet>
  </div>
</div>

4. 常见错误排查 #

如果还是出现重复显示的情况，检查以下几点：

• 有没有在根组件（比如AppComponent）和ClaimDashboardComponent之外的地方多放了<router-outlet>？多余的router-outlet会导致组件被重复渲染。
• 子路由是不是不小心定义成了顶级路由？比如直接在routes数组里写{ path: 'claim/:id/details', ... }，而不是放在父路由的children里，这会导致两个路由同时匹配，渲染两个组件。
• 导航链接的routerLink是不是用了绝对路径？比如在ClaimDashboardComponent里写[routerLink]="['/claim', id, 'details']"，虽然能正常跳转，但相对路径['details']更简洁且不易出错。

这样调整后，当你访问claim/1时，ClaimDashboardComponent会加载，同时默认渲染ClaimOverviewComponent到它内部的router-outlet；点击“详情”链接后，ClaimDetailsComponent会替换ClaimOverviewComponent显示，不会再出现同一页面显示两个界面的问题。

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