时间戳

首页 > 解决方案 > 动态组件加载 - 将组件作为变量

angular - 动态组件加载 - 将组件作为变量

问题描述

我在 Angular 中实现了一个相对复杂的组件加载器，我想从 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 约束的背景。

谢谢！

标签： angulartypescriptangular-dynamic-components

解决方案

resolveComponentFactory方法的签名如下所示：

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

您应该使用相同的类型：

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

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

推荐阅读