如何在动态加载的列表组件内部动态加载组件？

阿华AIGC实验室

2026-5-22

嘿，我来帮你搞定这个嵌套动态加载的问题！其实思路和你外层的动态加载逻辑是相通的，只是需要把**组件工厂解析器（ComponentFactoryResolver）和视图容器引用（ViewContainerRef）**的逻辑下沉到内部的列表组件里，同时做好数据和组件的传递。下面是具体的实现步骤：

如何在动态加载的列表组件内部实现组件动态加载

1. 给内部列表组件添加动态加载能力

首先，在你动态加载的那个列表组件（假设叫InnerListComponent）里，复制类似外层的逻辑：注入解析器、获取挂载容器、定义接收组件的输入属性：

import { Component, Input, ViewChild, ViewContainerRef, ComponentFactoryResolver, ComponentFactory } from '@angular/core';

@Component({
  selector: 'app-inner-list',
  template: `
    <!-- 原有列表内容 -->
    <div class="list-content">...</div>
    <!-- 用来挂载内部动态组件的容器 -->
    <div #innerDynamicHost></div>
  `
})
export class InnerListComponent {
  @Input() innerTargetComponent: any; // 接收要加载的组件类型
  @ViewChild('innerDynamicHost', { read: ViewContainerRef }) innerHost!: ViewContainerRef;

  constructor(private resolver: ComponentFactoryResolver) {}

  ngOnChanges() {
    // 当传入的组件变化时触发加载
    if (this.innerTargetComponent) {
      this.loadInnerComponent(this.innerTargetComponent);
    }
  }

  loadInnerComponent(component: any) {
    this.innerHost.clear(); // 先清空容器避免重复加载
    const factory: ComponentFactory<any> = this.resolver.resolveComponentFactory(component);
    const innerCompRef = this.innerHost.createComponent(factory);
    
    // 如果需要给内部动态组件传值，直接操作实例即可
    // innerCompRef.instance.someInput = '你的参数';
  }

  ngOnDestroy() {
    // 组件销毁时清理容器，避免内存泄漏
    this.innerHost.clear();
  }
}

2. 外层组件给动态列表传递内部组件

当你在外层加载InnerListComponent的时候，把要在它内部加载的组件类型传递给它的innerTargetComponent输入属性：

// 外层组件的loadComponent方法
loadComponent(component: any) {
  if (component) {
    this.rowContainers.clear();
    const factory: ComponentFactory<any> = this.resolver.resolveComponentFactory(component);
    const inlineComponent = this.rowContainers.createComponent(factory);
    
    // 假设当前加载的是InnerListComponent，传入它内部要加载的组件
    inlineComponent.instance.innerTargetComponent = YourDeepDynamicComponent;
    
    // 如果是通过Observable传递组件，也可以订阅后赋值
    // this.deepDynamicComponent$.subscribe(comp => {
    //   inlineComponent.instance.innerTargetComponent = comp;
    // });
  }
}