Angular 8：如何在懒加载特性模块中创建子router-outlet？

你遇到的核心问题是懒加载场景下，命名子路由的访问路径与路由配置不匹配，导致组件无法正确渲染到子router-outlet中。结合你的需求，我整理了两种针对性的解决方案：

步骤1：确认子router-outlet的基础配置 #

首先确保dashboard.page.component.html中的子路由出口命名正确，这是所有配置生效的前提：

<!-- DashboardPage模板示例 -->
<div class="sidebar">你的侧边栏组件</div>
<div class="main-content">
  <!-- 必须与路由配置中的outlet名称完全一致 -->
  <router-outlet name="dboard"></router-outlet>
</div>

方案A：改用普通子路由（推荐，单出口场景） #

如果你的Dashboard页面只有一个子路由出口，完全不需要使用命名outlet，直接调整路由配置即可兼容懒加载：

修改dashboard-routing.module.ts：

const routes: Routes = [
 { 
   path: "", 
   component: DashboardPage, 
   children: [
     { path: "", component: TempScreen }, // 访问/dashboard时默认显示
     { path: "new", component: TempTwoScreen }, // 访问/dashboard/new时切换组件
   ], 
 },
];

同时将DashboardPage中的子router-outlet去掉name属性：

<router-outlet></router-outlet>

这种配置完全符合Angular默认的子路由规则，懒加载和预加载模式下都会正常工作，也是最简洁的实现方式。

方案B：保留命名outlet，适配路径匹配 #

如果你确实需要多路由出口（比如页面同时有侧边栏内容区和弹窗区），可以通过添加重定向路由让/dashboard/new路径正确匹配命名outlet：

修改dashboard-routing.module.ts：

const routes: Routes = [
 { 
   path: "", 
   component: DashboardPage, 
   children: [
     { path: "", component: TempScreen, outlet: "dboard" },
     { path: "new", component: TempTwoScreen, outlet: "dboard" },
   ]
 },
 // 重定向普通路径到命名outlet的标准格式
 { path: "new", redirectTo: "(dboard:new)", pathMatch: "full" }
];

这样访问/dashboard/new时，Angular会自动重定向到/dashboard/(dboard:new)，从而将TempTwoScreen正确渲染到命名为dboard的router-outlet中。

为什么预加载正常，懒加载出问题？ #

预加载模式下，模块在应用启动时就已加载，路由匹配逻辑会一次性处理所有规则；而懒加载时，模块仅在首次访问/dashboard时才被加载，若路由配置的匹配规则与访问路径不兼容（比如命名outlet的路径格式错误），就会出现组件无法渲染的情况。你可以通过enableTracing: true在控制台查看路由日志，验证模块加载和路由匹配的过程。

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