动态组件加载 - 获取组件作为变量

Question

我在 Angular 中实现了一个相对复杂的 component loader，我想从 rxjs 存储中动态获取组件实例。

loadEditAreaComponent(component: any, componentInstanceData?: {}){
    const componentFactory = this.cfr.resolveComponentFactory(component);
    const viewContainerRef = this.editAreaHost.viewContainerRef;
    const componentRef = viewContainerRef.createComponent(componentFactory);
    Object.keys(componentInstanceData).forEach(key => {
      componentRef.instance[key] = componentInstanceData[key];
})

有效。但是，我觉得 any 在这里有点马虎。我似乎找不到正确的类型。

resolveComponentFactory的签名是 (method) ComponentFactoryResolver.resolveComponentFactory<unknown>(component: Type<unknown>): ComponentFactory<unknown>.

当我说 component: Type 我得到： Argument of type 'Type' is not assignable to parameter of type 'Type<unknown>'.

当我说 component: Type<unknown> 或 Type<any> 我得到： Type 'Type' is not generic.

非常感谢帮助，也很想了解一些我可能无法理解的 Typescript 约束的背景知识。

谢谢！

Answer 1

resolveComponentFactory 方法的签名如下所示：

abstract resolveComponentFactory<T>(component: Type<T>): ComponentFactory<T>;

您应该使用相同的类型：

import { Type } from '@angular/core';

loadEditAreaComponent<T>(component: Type<T>, ...

动态组件加载 - 获取组件作为变量

Dynamic Component Loading - get component as variable

typescript

angular

angular-dynamic-components