Angular 5组件传递与渲染问题咨询

这个问题我之前做动态组件容器的时候也碰到过——直接在模板里循环@Input传过来的组件数组是行不通的，因为Angular模板没法直接识别组件类。要实现这个需求，得用动态组件加载的方式，核心是借助ViewContainerRef来动态创建并挂载组件实例。下面分步骤给你讲具体实现：

1. 父组件准备组件数组并传递 #

首先在父组件里，把你要传递的组件类整理成数组，通过@Input传给子组件：

// parent.component.ts
import { Component } from '@angular/core';
import { ComponentAComponent } from './component-a/component-a.component';
import { ComponentBComponent } from './component-b/component-b.component';

@Component({
  selector: 'app-parent',
  template: `
    <!-- 把组件数组传给动态渲染组件 -->
    <app-dynamic-renderer [componentList]="targetComponents"></app-dynamic-renderer>
  `
})
export class ParentComponent {
  // 要传递的组件类数组
  targetComponents = [ComponentAComponent, ComponentBComponent];
}

2. 子组件实现动态渲染逻辑 #

子组件需要借助ViewContainerRef来作为动态组件的挂载容器，然后循环创建每个组件实例。

Angular 13+ 简洁写法（推荐） #

Angular 13之后简化了动态组件创建的API，不需要再用ComponentFactoryResolver，直接用ViewContainerRef.createComponent即可：

// dynamic-renderer.component.ts
import { Component, Input, ViewChild, ViewContainerRef, OnInit } from '@angular/core';

@Component({
  selector: 'app-dynamic-renderer',
  template: `
    <!-- 定义用来承载动态组件的容器 -->
    <div #componentHost></div>
  `
})
export class DynamicRendererComponent implements OnInit {
  @Input() componentList: any[] = [];
  // 获取容器的ViewContainerRef引用
  @ViewChild('componentHost', { read: ViewContainerRef }) componentHost!: ViewContainerRef;

  ngOnInit(): void {
    this.renderAllComponents();
  }

  private renderAllComponents(): void {
    // 先清空容器，避免重复渲染旧组件
    this.componentHost.clear();

    this.componentList.forEach(componentClass => {
      // 创建组件实例并挂载到容器中
      const componentRef = this.componentHost.createComponent(componentClass);

      // 👉 如果需要给动态组件传递输入属性，可以这么做：
      // componentRef.instance.title = '动态传入的标题';

      // 👉 如果需要监听动态组件的输出事件：
      // componentRef.instance.onSubmit.subscribe(data => {
      //   console.log('收到动态组件的事件:', data);
      // });
    });
  }
}

Angular 12及以下版本兼容写法 #

如果你的项目还在用旧版本Angular，需要借助ComponentFactoryResolver来解析组件工厂：

// dynamic-renderer.component.ts
import { Component, Input, ViewChild, ViewContainerRef, OnInit, ComponentFactoryResolver } from '@angular/core';

@Component({
  selector: 'app-dynamic-renderer',
  template: `<div #componentHost></div>`
})
export class DynamicRendererComponent implements OnInit {
  @Input() componentList: any[] = [];
  @ViewChild('componentHost', { read: ViewContainerRef }) componentHost!: ViewContainerRef;

  constructor(private resolver: ComponentFactoryResolver) {}

  ngOnInit(): void {
    this.renderAllComponents();
  }

  private renderAllComponents(): void {
    this.componentHost.clear();

    this.componentList.forEach(componentClass => {
      // 先解析组件工厂
      const componentFactory = this.resolver.resolveComponentFactory(componentClass);
      // 再创建组件实例
      const componentRef = this.componentHost.createComponent(componentFactory);
      // 同样可以设置输入输出属性
    });
  }
}

3. 进阶：给每个动态组件传递不同参数 #

如果需要给数组里的每个组件传递不同的输入参数，可以把组件类和参数封装成对象：

// 父组件里修改数组结构
targetComponents = [
  { component: ComponentAComponent, inputs: { title: '我是组件A', count: 5 } },
  { component: ComponentBComponent, inputs: { message: '组件B的专属消息' } }
];

然后子组件里渲染时批量赋值：

private renderAllComponents(): void {
  this.componentHost.clear();

  this.componentList.forEach(item => {
    const componentRef = this.componentHost.createComponent(item.component);
    // 把输入属性批量赋值给组件实例
    Object.assign(componentRef.instance, item.inputs);
    // 手动触发变更检测，确保属性生效
    componentRef.changeDetectorRef.detectChanges();
  });
}

关键注意事项 #

• 确保所有动态组件都在当前模块的declarations数组中（如果是共享组件，还要在模块的exports里导出）；
• Angular 9+启用Ivy之后，不需要再把动态组件添加到entryComponents数组中了；
• 如果组件是懒加载的，可以用import()动态加载组件类，再传入数组；
• 记得在子组件销毁时清理容器，避免内存泄漏：

  ngOnDestroy(): void {
    this.componentHost.clear();
  }
  

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