Angular 11动态表单创建报错求助：componentFactory.create及setInput问题

一、解决componentFactory.create is not a function报错 #

这个错误源于Angular版本差异：示例使用的是Angular 14+的API，而Angular 11中ViewContainerRef.createComponent不支持直接传入组件类型，必须通过ComponentFactoryResolver先创建组件工厂。

修改dynamic-field.component.ts代码：

1. 注入ComponentFactoryResolver依赖：

import { ComponentFactoryResolver, ViewContainerRef } from '@angular/core';

constructor(
  private resolver: ComponentFactoryResolver,
  private dynamicInputContainer: ViewContainerRef
) {}

2. 替换组件创建逻辑：

// 先生成组件工厂
const componentFactory = this.resolver.resolveComponentFactory(componentInstance);
// 通过工厂创建组件实例
const dynamicComponent = this.dynamicInputContainer.createComponent(componentFactory);

二、解决Property 'setInput' does not exist on type 'ComponentRef<unknown>'报错 #

setInput是Angular 14+新增的API，Angular 11中需要直接通过组件实例的instance属性设置输入值：

// 替换原有的dynamicComponent.setInput('field', this.field);
dynamicComponent.instance.field = this.field;

完整修改后的核心代码片段 #

import { Component, Input, ViewContainerRef, ComponentFactoryResolver } from '@angular/core';
// 导入你的动态组件（如DynamicRadioComponent等）

@Component({
  selector: 'app-dynamic-field',
  templateUrl: './dynamic-field.component.html',
  styleUrls: ['./dynamic-field.component.css']
})
export class DynamicFieldComponent {
  @Input() field: any;

  constructor(
    private resolver: ComponentFactoryResolver,
    private dynamicInputContainer: ViewContainerRef
  ) {}

  ngOnInit() {
    // 假设componentInstance是你要动态渲染的组件类型
    const componentFactory = this.resolver.resolveComponentFactory(componentInstance);
    const dynamicComponent = this.dynamicInputContainer.createComponent(componentFactory);
    dynamicComponent.instance.field = this.field;
  }
}

额外注意：确保所有动态组件都在模块的entryComponents数组中声明（Angular 11部分场景仍需手动添加，避免组件无法被解析）：

@NgModule({
  declarations: [
    DynamicFieldComponent,
    DynamicRadioComponent,
    // 其他动态组件
  ],
  entryComponents: [
    DynamicRadioComponent,
    // 其他动态组件
  ]
})
export class AppModule { }

内容的提问来源于stack exchange，提问作者Cesar Gutierrez Davalos