Angular路由嵌套问题：导航组件无法切换App内子组件

你在构建Angular导航时踩了几个常见的路由配置坑，我来帮你一步步解决：

首先，分析错误原因 #

你遇到的NullInjectorError: No provider for ChildrenOutletContexts!，本质是路由配置和组件结构不匹配导致的：你把AppComponent放在了/home这个子路由节点下，但AppComponent作为根组件（通常是项目bootstrap的入口），它内部的router-outlet无法获取到正确的路由上下文，所以抛出了这个错误。另外你直接在AppComponent模板里写了<app-slideshow>这类组件标签，这会导致它们始终显示，和路由控制的逻辑冲突。

步骤1：修正路由配置 #

根路由模块必须使用RouterModule.forRoot()，并且不要把AppComponent放在/home路径下，而是作为根路由的容器。修改app-routing.module.ts如下：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { SlideshowComponent } from './slideshow/slideshow.component';
import { AboutComponent } from './about/about.component';
import { ServiceComponent } from './service/service.component';
import { WorksComponent } from './explore/works.component';
import { ContactComponent } from './contact/contact.component';

const routes: Routes = [
  {
    path: '', // 根路径
    component: AppComponent,
    children: [
      { path: 'slideshow', component: SlideshowComponent },
      { path: 'about', component: AboutComponent },
      { path: 'service', component: ServiceComponent },
      { path: 'explore', component: WorksComponent },
      { path: 'contact', component: ContactComponent },
      // 默认重定向到slideshow，打开页面就显示首页组件
      { path: '', redirectTo: 'slideshow', pathMatch: 'full' }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)], // 根路由必须用forRoot
  exports: [RouterModule]
})
export class AppRoutingModule { }

步骤2：修改AppComponent模板 #

把模板里直接渲染的子组件标签删掉，只保留导航组件和router-outlet——路由会自动在router-outlet位置渲染对应的子组件：

<!-- app.component.html -->
<app-dashboard></app-dashboard> <!-- 保留导航组件 -->
<router-outlet></router-outlet> <!-- 子组件将在这里动态渲染 -->

步骤3：调整导航链接的路由路径 #

现在子路由直接挂在根路径下，所以把导航里的routerLink简化：

<!-- dashboard组件的导航代码 -->
<nav>
 <ul>
 <li>
 <a routerLink="/slideshow">
 <p>Home</p>
 </a>
 </li>
 <li>
 <a routerLink="/about">
 <p>About Us</p>
 </a>
 </li>
 <li>
 <a routerLink="/service">
 <p>Service</p>
 </a>
 </li>
 <li>
 <a routerLink="/explore">
 <p>Explore</p>
 </a>
 </li>
 <li>
 <a routerLink="/contact">
 <p>Contact Us</p>
 </a>
 </li>
 </ul>
</nav>

如果你想使用相对路径（更灵活），可以改成routerLink="slideshow"，但要确保DashboardComponent和子路由处于同一个路由层级（这里是满足的）。

步骤4：确保模块导入正确 #

检查AppModule里是否正确导入了AppRoutingModule，这是路由生效的关键：

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';
// 导入所有用到的组件
import { SlideshowComponent } from './slideshow/slideshow.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { AboutComponent } from './about/about.component';
import { ServiceComponent } from './service/service.component';
import { WorksComponent } from './explore/works.component';
import { ContactComponent } from './contact/contact.component';

@NgModule({
  declarations: [
    AppComponent,
    SlideshowComponent,
    DashboardComponent,
    AboutComponent,
    ServiceComponent,
    WorksComponent,
    ContactComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule // 必须导入路由模块
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

做完这些调整后，你的导航应该就能正常控制子组件的显示/隐藏了，而且那个ChildrenOutletContexts的错误也会消失。

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