Angular中如何在组件内动态嵌入可变组件并向其传递数据

核心思路 #

完全替代innerHTML拼接、ngSwitch分支判断的临时方案，基于Angular原生的动态组件加载能力，由通用容器组件直接接收外部传入的组件类引用作为输入，在指定挂载位置自动创建对应组件实例、完成数据绑定，全程不需要修改通用容器的内部代码。

具体实现步骤（适配通用可展开表格场景） #

1. 定义动态挂载点指令 #

首先封装一个极简的宿主指令，用来标记动态组件的挂载位置，自动完成组件创建、数据传递的通用逻辑，不需要在每个业务位置重复写相同代码：

// dynamic-host.directive.ts
import { Directive, Input, ViewContainerRef, ComponentRef, Type } from '@angular/core';

@Directive({
  selector: '[dynamicHost]',
  standalone: true
})
export class DynamicHostDirective {
  // 接收外部传入的要加载的组件类型
  @Input() set dynamicComponent(component: Type<any>) {
    this.loadedComponent = component;
    this.renderComponent();
  }
  // 接收要传给动态组件的数据
  @Input() componentContext: any;

  private loadedComponent: Type<any>;
  constructor(private viewContainerRef: ViewContainerRef) {}

  private renderComponent() {
    // 清空挂载点之前的内容
    this.viewContainerRef.clear();
    if (!this.loadedComponent) return;
    // 创建组件实例
    const componentRef: ComponentRef<any> = this.viewContainerRef.createComponent(this.loadedComponent);
    // 给组件实例传入约定好的统一上下文数据
    componentRef.instance.context = this.componentContext;
  }
}

这里约定所有需要被动态嵌入的组件，都声明一个@Input() context: any属性接收传入的数据，不需要容器组件知道每个子组件的具体输入属性名，大幅降低维护成本。旧组件可以通过setter兼容原有属性，比如@Input() set data(val) { this.context = val }。

2. 改造通用表格组件的核心模板 #

把原来的innerHTML渲染区域替换为动态挂载点，只需要新增一个输入属性接收外部传入的行详情组件即可，其他表格逻辑完全不需要改动：

• 先在通用表格的TypeScript代码里新增输入定义：

  // generic-table.component.ts
  import { Type } from '@angular/core';
  // 新增输入：接收外部传入的行详情组件类
  @Input() rowDetailComponent: Type<any>;
  // 原来的getRowDetail方法完全可以删掉，不需要再返回HTML字符串
  

• 再把模板里原来的innerHTML区域替换为带动态挂载指令的容器：

  <!-- 原来的核心待改造区域 -->
  <div class="detailCellDiv" [@detailExpand]="row == expandedRow ? 'expanded' : 'collapsed'">
    <!-- 替换为动态挂载点：传入要加载的组件、当前行的数据 -->
    <ng-container 
      dynamicHost 
      [dynamicComponent]="rowDetailComponent" 
      [componentContext]="row">
    </ng-container>
  </div>
  

3. 外部调用方式 #

完全不需要修改通用表格的内部代码，外部业务场景只需要把自己开发的详情组件类直接绑定到输入上即可：

<!-- 业务页面调用通用表格，直接传入ElementDetailComponent的类引用 -->
<generic-table 
  [dataSource]="elementDataList" 
  [rowDetailComponent]="ElementDetailComponent">
</generic-table>

对应的业务页面TypeScript代码只需要导入对应的详情组件，在类里声明即可：

import { ElementDetailComponent } from './element-detail.component';

@Component({/* 业务页面配置 */})
export class ElementListPageComponent {
  // 直接把组件类赋值给公共变量，模板里就能绑定
  readonly ElementDetailComponent = ElementDetailComponent;
  elementDataList = [/* 列表数据 */];
}

通用容器（原component2场景）的适配 #

逻辑和通用表格完全一致，不需要额外改动：

1. 在通用容器component2里新增两个输入：

   // component2.component.ts
   @Input() embeddedComponent: Type<any>;
   @Input() embeddedData: any;
   

2. 模板里原来的可变组件位置替换为动态挂载点：

   <div>Hi, I'm comp 2. Variable component: 
     <ng-container 
       dynamicHost 
       [dynamicComponent]="embeddedComponent" 
       [componentContext]="embeddedData">
     </ng-container>
   </div>
   

3. 外部调用时直接传入component1的类引用和对应数据即可，完全符合最初的设计预期：

   <component2 [embeddedComponent]="Component1" [embeddedData]="passData"></component2>
   

补充兼容能力 #

如果业务场景有简单的自定义展示需求，不想单独写组件，可以额外给通用容器增加一个模板输入，支持传入ng-template作为展示内容，和组件传入的逻辑共存：

• 通用容器新增输入：@Input() detailTemplate: TemplateRef<any>
• 模板里优先判断是否有模板传入，有就用ngTemplateOutlet渲染，没有就动态加载组件：

  <ng-container *ngIf="detailTemplate; else dynamicComp">
    <ng-container *ngTemplateOutlet="detailTemplate; context: { $implicit: row }"></ng-container>
  </ng-container>
  <ng-template #dynamicComp>
    <ng-container dynamicHost [dynamicComponent]="rowDetailComponent" [componentContext]="row"></ng-container>
  </ng-template>
  

注意事项 #

• 所有动态加载的组件，需要在对应模块的declarations和entryComponents数组中声明（Ivy渲染引擎下的standalone组件不需要额外配置，直接传入类引用即可）
• 如果需要监听动态组件的事件（比如子组件触发关闭详情、更新行数据），可以在DynamicHost指令里给创建好的组件实例增加事件订阅，把事件向外抛出给容器组件
• 完全兼容Angular的变更检测、组件生命周期机制，和静态写在模板里的组件行为完全一致，不会出现innerHTML渲染时的编译跳过、绑定失效问题

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