使用ComponentFactoryResolver创建多个组件

Question

我正在尝试使用ComponentFactoryResolver动态创建组件。

我有一个组件，它有一个@input，用于保存组件ref和组件输入。

问题是当组件在DOM中创建时，它们保存的是确切的实例数据。

是否可以创建组件而不需要它们通过引用来保持实例状态?

class TrimItemsToPopupListComponent implements OnInit, OnDestroy, AfterViewInit {
@Input() component?: {
ref: ComponentType<unknown>,
inputs: Record<string, unknown>[]
};
constructor(
private resolver: ComponentFactoryResolver,
private cd: ChangeDetectorRef
) {}
ngAfterViewInit(): void {
this.componentVC.clear();
this.inputItems.slice(0, this.trimCount).forEach(() => {
const factory = this.resolver.resolveComponentFactory(this.component.ref);
const componentRef = this.componentVC.createComponent(factory);
this.component.inputs.forEach((cmpInput, index) => {
const inputKey = Object.keys(cmpInput)[0] as string;
// @ts-ignore
componentRef.instance[inputKey] = this.component.inputs[index][inputKey];
});
});
this.cd.detectChanges();
}

Answer 1

你可以试试:

class TrimItemsToPopupListComponent implements OnInit, OnDestroy, AfterViewInit {
@Input() component ?: {
ref: ComponentType<unknown>,
inputs: Record<string, unknown>[]
};
constructor(
private resolver: ComponentFactoryResolver,
private cd: ChangeDetectorRef
) { }
ngAfterViewInit(): void
{
this.componentVC.clear();
this.inputItems.slice(0, this.trimCount).forEach(() => {
const factory = this.resolver.resolveComponentFactory(this.component.ref);
this.component.inputs.forEach((cmpInput, index) => {
const inputKey = Object.keys(cmpInput)[0] as string;
const inputValue = this.component.inputs[index][inputKey];
const inputBinding = { [inputKey]: inputValue };
// Pass the input binding as the `inputs` property
const componentRef = this.componentVC.createComponent(factory, undefined, undefined, [inputBinding]);
});
});
this.cd.detectChanges();
}

简要说明:

• ComponentFactoryResolver用于为组件中指定的组件解析ComponentFactory。
• 使用trimCount属性将inputItems数组切片为较小的大小，并对切片数组中的每个项执行循环。
在循环中，遍历组件输入的输入属性，并使用inputKey和inputValue变量为每个输入创建输入绑定。然后调用ViewContainerRef的createComponent()方法，传递ComponentFactory，以及在上一步中使用inputs属性创建的输入绑定。

这应该创建组件的多个实例，每个实例都有自己的一组输入绑定，而不是通过引用共享相同的实例数据。