使用ComponentFactoryResolver创建组件时如何避免实例状态引用共享

当然可以创建状态完全独立的动态组件，你的问题出在代码逻辑错误上，导致所有组件拿到了完全相同的输入参数，进而出现状态共享的情况。

问题根源 #

你的代码有两个核心逻辑错误：

1. 遍历inputItems时没有使用当前循环的索引，导致每次创建组件都重复处理整个inputs数组
2. 赋值输入参数时，错误地遍历了全部inputs项，而非给每个组件分配对应索引的输入集合

修正后的代码 #

class TrimItemsToPopupListComponent implements OnInit, OnDestroy, AfterViewInit {
    @Input() component?: {
        ref: ComponentType<unknown>,
        inputs: Record<string, unknown>[]
    };
    @ViewChild('componentVC', { read: ViewContainerRef }) componentVC!: ViewContainerRef;
    @Input() inputItems: unknown[] = [];
    @Input() trimCount = 0;

    constructor(
        private resolver: ComponentFactoryResolver,
        private cd: ChangeDetectorRef
    ) {}

    ngAfterViewInit(): void {
        this.componentVC.clear();
        // 遍历inputItems时获取当前项索引，匹配对应输入参数
        this.inputItems.slice(0, this.trimCount).forEach((_, itemIndex) => {
            if (!this.component || itemIndex >= this.component.inputs.length) return;

            const factory = this.resolver.resolveComponentFactory(this.component.ref);
            const componentRef = this.componentVC.createComponent(factory);
            // 获取当前组件对应的专属输入参数
            const currentInputs = this.component.inputs[itemIndex];

            Object.entries(currentInputs).forEach(([inputKey, value]) => {
                // 可选：如果是引用类型（对象/数组），创建独立副本彻底隔离状态
                const inputValue = typeof value === 'object' && value !== null 
                    ? Array.isArray(value) ? [...value] : { ...value } 
                    : value;
                // @ts-ignore
                componentRef.instance[inputKey] = inputValue;
            });

            // 触发当前组件的变更检测
            componentRef.changeDetectorRef.detectChanges();
        });
        this.cd.detectChanges();
    }
}

关键修改说明 #

• 给inputItems的遍历添加了索引itemIndex，让每个动态组件对应inputs数组中同索引的输入参数
• 移除了对整个inputs数组的遍历，改为直接获取当前组件对应的输入集合
• 添加了索引越界判断，避免出现数组访问错误
• 针对引用类型的输入参数，可选创建独立副本，彻底避免因对象引用导致的状态共享
• 为每个动态组件单独触发变更检测，确保输入参数及时生效

修改完成后，每个动态创建的组件都会拥有独立的输入参数和实例状态，不会再出现共享数据的情况。

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