Angular多模块路由问题：/dashboard/status子路由内容无法正常显示

问题根因 #

• CustomerComponent模板缺失<router-outlet>占位符：customerRoutes被配置为CustomerComponent的子路由，所有子路由匹配到的组件都需要渲染到CustomerComponent内部的路由出口中，缺少该标签时子组件没有插入节点，页面不会更新。
• 命名outlet路由未覆盖子路径场景：dashboard-layout-routing.module.ts中当前两个带命名outlet的路由仅匹配/dashboard（空相对路径）的场景，访问/dashboard/status时相对路径为status，无法命中这两个路由，导致customerRoutes的子路由匹配逻辑无法触发。

修复步骤 #

1. 调整dashboard-layout路由配置 #

修改dashboard-layout-routing.module.ts的路由规则，让命名outlet路由可匹配所有/dashboard下的子路径：

const routes: Routes = [
    {
        path: '',
        children: [
            {
                path: '',
                component: AdminComponent,
                outlet: 'admin',
                children: adminRoutes
            },
            {
                path: '',
                component: CustomerComponent,
                outlet: 'customer',
                children: customerRoutes
            }
        ]
    }
];

外层增加空路径父路由后，所有/dashboard下的路径都会命中该父路由，激活两个命名outlet对应的路由，触发子路由匹配。

2. 新增CustomerComponent路由出口 #

编辑customer.component.html，在子路由内容展示位置添加<router-outlet>：

<!-- 原有CustomerComponent公共布局代码 -->
<div class="content-wrapper">
  <router-outlet></router-outlet>
</div>

管理员侧如果有子路由需求，同步在AdminComponent模板中添加路由出口即可。

3. 修正子路由匹配规则 #

修改customer-routing.module.ts，给空路径路由增加pathMatch: 'full'，避免空路径拦截所有子路由请求：

export const customerRoutes: Routes = [
    {
        path: '',
        component: CustomerIndexComponent,
        pathMatch: 'full'
    },
    {
        path: 'status',
        component: AccountStatusComponent, 
    },
];

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