Angular 9三级嵌套路由访问/events/center不显示CenterComponent问题排查

你当前的配置存在4处核心错误，按优先级修正即可解决CenterComponent不渲染的问题：

1. 二级路由children配置类型错误 #

Angular路由的children属性必须是数组类型，你当前配置为对象，语法完全不生效。

2. 命名路由出口未匹配 #

你在app-event组件内用了带name="event"的命名路由出口，但是对应的子路由没有指定outlet: 'event'参数，路由无法找到渲染位置。

3. 语法拼写错误 #

• 所有路由中的redircectTo拼写错误，正确应为redirectTo
• 通配符路由的redirectTo配置行末尾缺少逗号，触发TS语法错误

4. 根路由冗余配置（非直接报错，但建议修正） #

根路由中path: ''对应AppComponent属于多余配置，AppComponent作为项目根组件默认会直接加载，不需要再通过路由渲染，否则会出现组件套娃的问题。

修正后的二级EVENT_ROUTE配置 #

const EVENT_ROUTE: Routes = [
  {
    path: '',
    component: EventComponent,
    children: [ // 改为数组格式
      {
        path: 'center',
        outlet: 'event', // 匹配命名路由出口
        loadChildren: () => import('../app/modules/center/center.module').then(m => m.CenterModule),
      }
    ]
  },
  {
    path: '**',
    redirectTo: '/events/center', // 修正拼写，补充逗号
    pathMatch: 'full'
  }
];
..
RouterModule.forChild(EVENT_ROUTE);

修正后的三级CENTER_ROUTE配置 #

const CENTER_ROUTE: Routes = [
  {
    path: '',
    component: CenterComponent
  },
  {
    path: '**',
    redirectTo: '', // 修正拼写，补充逗号
    pathMatch: 'full'
  }
];
..
RouterModule.forChild(CENTER_ROUTE);

如果后续需要在CenterComponent的name="center"路由出口渲染子路由，对应子路由也需要增加outlet: 'center'的配置即可。

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