Angular Routing常见问题：是否可以将组件作为路由数据传递？

核心思路是定义统一的内容描述协议，结合*ngComponentOutlet能力实现多类型内容的无分支渲染，同时兼容路由数据传递和Akita存储，后续扩展新类型无需修改公共头部代码。

步骤1：定义通用结构与基础组件 #

首先定义统一的副标题数据接口，规范所有可渲染内容的结构：

import { Type } from '@angular/core';

export interface HeaderSubtitleConfig {
  // 要渲染的组件类
  component: Type<any>;
  // 传递给组件的输入参数
  inputs?: Record<string, any>;
}

然后预先封装常用的副标题基础组件：

• 纯文本组件

@Component({
  selector: 'text-subtitle',
  template: `<span>{{ content }}</span>`
})
export class TextSubtitleComponent {
  @Input() content!: string;
}

• 图标组件

@Component({
  selector: 'icon-subtitle',
  template: `<mat-icon>{{ iconName }}</mat-icon>`
})
export class IconSubtitleComponent {
  @Input() iconName!: string;
}

步骤2：路由配置中传递数据 #

直接在路由的data字段配置对应页面的头部信息，不需要做任何特殊处理：

const routes: Routes = [
  {
    path: 'dashboard',
    component: DashboardComponent,
    data: {
      header: {
        title: '仪表盘',
        subTitle: {
          component: IconSubtitleComponent,
          inputs: { iconName: 'check_circle' }
        } as HeaderSubtitleConfig
      }
    }
  },
  {
    path: 'user-list',
    component: UserListComponent,
    data: {
      header: {
        title: '用户列表',
        subTitle: {
          component: TextSubtitleComponent,
          inputs: { content: '共128位有效用户' }
        } as HeaderSubtitleConfig
      }
    }
  }
]

步骤3：Akita存储逻辑 #

监听路由变化时，直接把路由data里的header完整结构存入Akita store即可，无需做类型判断、格式转换操作。

步骤4：公共头部渲染 #

完全删除原有的条件判断逻辑，直接用*ngComponentOutlet渲染即可：

<!-- 公共头部区域 -->
<div class="header">
  <h2 class="title">{{ title }}</h2>
  <div class="sub-title">
    <ng-container 
      *ngComponentOutlet="subTitle.component; inputs: subTitle.inputs"
    ></ng-container>
  </div>
</div>

扩展说明 #

后续需要新增副标题类型（比如带跳转的链接、状态标签、操作按钮等）时，只需要新增对应的业务组件，在路由配置里替换component和inputs参数即可，不需要修改公共头部的任何代码，完全符合开闭原则。

注意：*ngComponentOutlet的inputs参数为Angular 14+版本支持，如果使用低于14的版本，可以通过ComponentFactoryResolver动态创建组件并注入输入参数，整体逻辑保持一致。

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