Question

我正在尝试为我的某个屏幕动态渲染组件。我使用componentFactoryResolver.resolveComponentFactory和viewContainerRef.createComponent api来实现相同的目的。我定义了变量“loadedComp : GlobalDynamicComponenet;”并动态加载组件 this.loadedComp = <GlobalDynamicComponenet>this.registry.getComponent("<component name>");

然后我尝试使用下面的代码

来检索工厂对象

const factory = this.componentFactoryResolver.resolveComponentFactory(this.loadedComp);

上面的代码抛出错误说 -

TS2345：“GlobalDynamicComponenet”类型的参数不能分配给“Type＆lt; {}＆gt;”类型的参数。 [0]'GlobalDynamicComponenet'

类型中缺少属性'apply'

美丽的是，如果我评论上面的部分，启动服务器，然后取消注释相同的代码，然后一切都很顺利。 Angular找到工厂组件，即使它有编译问题，我可以成功渲染组件。只是那个npm开始失败了。谁能帮助我摆脱编译问题？

全局动态组件类：

***import { Component,Input } from '@angular/core';
@Component({
  selector:'abstract-comp',
  template: ` <h1></h1>
  `
})
export class GlobalDynamicComponenet
{
  @Input() parentOrder={};
}***

提前致谢！

Answer 1

这不是组件错误，这是类型错误。您没有一致地键入对象。首先，将它们定义为类型A，然后尝试为其指定类型B {}。这就是为什么它不会编译。

打字稿可以帮到你。并迫使你做出明智的决定。尝试在这段代码中专门输入每个变量和对象，我确定你会看到出了什么问题。

Answer 2

//下面的代码是获取所有可用的工厂。这将检索ngModule中条目组件中定义的所有组件。

var factories = Array.from（this.componentFactoryResolver [＆＃39; _factories＆＃39;]。keys（））;

//下面的代码将使用您传递的组件名称获取工厂类。

var factoryClass：any =＆gt; factories.find（（x：any）=＆gt; x.name === this.columns [＆＃34; ComponentName＆＃34;]）; const factory = this.componentFactoryResolver.resolveComponentFactory（factoryClass）;

//下面的代码将使用工厂创建组件。

const ref = this.viewContainerRef.createComponent（factory）;

//在coed下面将设置您尝试动态加载的输入参数的值。

（ref.instance）.parentOrder = this.order;

在我的角度组件

2 个答案: