Angular 5嵌套Router Outlet无法正常工作的技术求助

我来帮你一步步梳理嵌套路由的问题，这类问题大多是路由层级配置或router-outlet放置位置不对导致的，咱们逐个检查：

1. 先确认父组件模板里有没有嵌套路由出口 #

你的Angular5MainComponent作为父路由的容器组件，它的模板里必须添加第二个router-outlet，子路由的内容才能在这里渲染。比如：

<!-- angular5-main.component.html -->
<div class="sidebar">
  <!-- 你的侧边导航栏 -->
  <a routerLink="./HistoryOfAngular">Angular历史</a>
</div>
<!-- 嵌套路由出口，子组件会在这里显示 -->
<router-outlet></router-outlet>

要是忘了加这个，子路由组件根本没地方渲染，自然看不到效果。

2. 检查子模块的路由配置是否正确 #

在angular5.module.ts里，RouterModule.forChild的路由需要和父路由形成层级关系，正确的配置应该是把子路由放在父路由的children数组里：

// angular5.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { Angular5MainComponent } from './angular5-main.component';
import { HistoryOfAngularComponent } from './history-of-angular.component';

const routes: Routes = [
  // path为空，对应父路由的`/angular5`路径，加载父容器组件
  { 
    path: '', 
    component: Angular5MainComponent,
    // 子路由都放在children数组里
    children: [
      { path: 'HistoryOfAngular', component: HistoryOfAngularComponent },
      // 可以继续添加其他子路由
      // { path: 'AngularFeatures', component: AngularFeaturesComponent }
    ]
  }
];

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

这样Angular才能识别这是嵌套路由，会自动把子组件渲染到父组件的router-outlet里。

3. 确认根路由是否正确关联子模块 #

你需要确保AppModule正确加载了子模块，有两种方式：

• 直接导入：如果不需要懒加载，在AppModule里导入Angular5Module，根路由配置保持你原来的{path:'angular5',component:Angular5MainComponent}即可。
• 懒加载（推荐）：根路由用loadChildren加载子模块，这样更高效：

// app.module.ts
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';

@NgModule({
  imports: [
    RouterModule.forRoot([
      {path:'home',component:HomeComponent},
      // 懒加载子模块，访问/angular5时自动加载Angular5Module
      {path:'angular5', loadChildren: () => import('./angular5/angular5.module').then(m => m.Angular5Module)},
      {path:'',redirectTo:'home', pathMatch:'full'},
      {path:'**', component:HomeComponent}
    ])
    // 如果是直接导入，这里要加Angular5Module
  ],
  // ...其他配置
})
export class AppModule { }

4. 检查导航链接的路径是否正确 #

侧边栏的导航链接要使用正确的路径：

• 相对路径（推荐，基于当前路由）：routerLink="./HistoryOfAngular"
• 完整路径：routerLink="/angular5/HistoryOfAngular"
  如果路径写错了，点击导航也不会触发子路由渲染。

最后验证步骤 #

1. 启动应用，访问/angular5，确认Angular5MainComponent正常显示
2. 点击侧边栏的HistoryOfAngular链接，查看URL是否变成/angular5/HistoryOfAngular
3. 检查页面是否在Angular5MainComponent的router-outlet位置渲染了HistoryOfAngularComponent

要是还没解决，可以打开浏览器控制台，看看有没有路由相关的错误提示，Angular通常会给出明确的报错信息，比如找不到路由或组件之类的。

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