Angular路由问题：点击Experiment链接无法在outlet1显示内容

问题描述 #

点击test.component.html中的Home/About/Dashboard按钮时，outlet1能正常显示对应组件内容，但点击Experiment按钮时，内容无法显示。

错误原因 #

1. 路由配置不匹配：experiment是懒加载模块的路由，但你尝试将它作为命名路由outlet1的子路径跳转，而主路由配置里experiment并未关联到outlet1。
2. 懒加载模块路由冗余配置：my-routing.module.ts中给路由指定了outlet: "outlet1"，懒加载模块的路由会继承父路由上下文，这个多余配置会导致路由匹配失败。

修复步骤 #

步骤1：修改主路由配置（app-routing.module.ts） #

将experiment路由关联到outlet1，让它成为命名路由的一部分：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './components/home/home.component';
import { AboutComponent } from './components/about/about.component';
import { DashboardComponent } from './components/dashboard/dashboard.component';
import { AuthGuard } from './auth.gard';
import { ListComponent } from './list.component';
import { TestComponent } from './test/test.component';

const myModule = () => import('./my-routing/my-module').then(x => x.MyRoutingModule);
const routes: Routes = [
  { path: '', component: TestComponent },
  // 修改experiment路由，指定关联outlet1
  {
    path: 'experiment',
    outlet: "outlet1",
    loadChildren: myModule
  },
  {
    path: 'home',
    component: HomeComponent, outlet: "outlet1"
  },
  {
    path: 'about', canActivate: [AuthGuard],
    component: AboutComponent, outlet: "outlet1",
  },
  {
    path: 'dashboard',
    component: DashboardComponent, outlet: "outlet1"
  }
];

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

步骤2：修改懒加载模块路由（my-routing.module.ts） #

移除冗余的outlet配置，让子路由继承父路由的命名outlet上下文：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ListComponent } from '../list.component';
import { TestComponent } from '../test/test.component';

const routes: Routes = [
  // 去掉outlet配置
  { path: '', component: ListComponent },
];

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

步骤3：保持test.component.html的跳转链接不变 #

你的Experiment链接写法正确，无需修改：

<div class="col-1">
  <a [routerLink]="[{ outlets:{ outlet1: ['experiment'] }}]"><button type="button" class="btn btn-primary">
      Experiment</button></a>
</div>

修改完成后，点击Experiment按钮时，Angular会正确匹配outlet1下的experiment懒加载路由，在命名路由出口中显示ListComponent的内容。

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