如何激活Angular中的嵌套命名路由出口？

核心问题 #

你之前的路由配置错误在于：demo作为根级路由，无法找到嵌套在ChildComponent（属于global/en路由）里的userProfile命名出口。Angular的命名路由出口有作用域限制，根级路由的命名路由只能匹配根组件（AppComponent）中的出口，嵌套组件里的出口必须由其父路由的子路由来配置。

正确的路由配置 #

将demo路由作为global/en的子路由，这样Angular就能在ChildComponent的上下文里找到对应的命名出口：

export const routes: Routes = [
  {
    path: "global/en",
    component: ChildComponent,
    children: [
      {
        path: "demo",
        component: DemoComponent,
        outlet: "userProfile"
      }
    ]
  }
];

验证方式 #

保持访问URL不变：localhost:4200/global/en(userProfile:demo)，此时DemoComponent会正确渲染在ChildComponent的userProfile命名出口中。

关键要点 #

• 命名路由的配置必须与出口所在组件的路由层级对应：出口在哪个路由的组件里，该命名路由就必须是这个路由的子路由。
• 根级路由的命名路由只能关联根组件中的命名出口，无法访问嵌套子组件内的出口。

内容的提问来源于stack exchange，提问作者Front-a-Little