Angular中如何在父路由中条件性隐藏命名路由出口

当然可以通过调整路由结构实现，不用在组件里加*ngIf判断。核心思路是拆分路由层级，把需要显示Header的子路由和不需要的分开配置：

{ 
  path: ':id',
  children: [
    // 中间路由：承载需要显示Header的子页面
    {
      path: '',
      children: [
        // 仅在这个中间路由下加载Header辅助路由
        {
          path: '',
          component: HeaderComponent,
          outlet: 'header'
        },
        // 这里放所有需要显示Header的子路由
        {
          path: 'some/route',
          component: SomeComponent
        },
        // ...其他需要Header的路由
      ]
    },
    // 不需要显示Header的子路由，直接挂在:id下
    {
      path: 'another/path',
      component: SomeOtherComponent
    },
    // ...其他不需要Header的路由
  ]
}

逻辑说明 #

• 原来的配置中，Header辅助路由是':id'的直接子路由，只要进入':id'下的任何子页面，这个空路径的辅助路由都会匹配，导致Header一直显示。
• 调整后，Header辅助路由被放到了一个中间空路由下，只有访问该中间路由下的子页面时，才会加载Header；而'another/path'这类不需要Header的路由直接挂在':id'下，不会触发Header的加载逻辑。

这种方式完全通过路由定义控制Header的显示，不需要在组件内做任何路由匹配判断，完全符合你的需求。

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