Question

我知道如何使用ComponentFactoryResolver.resolveComponentFactory(AComponentType)

初始化组件

但该方法需要Type，而在我的代码中，我将该类型的名称设为string。

在Angular API中有一种方法可以通过string来解决吗？如果没有，我如何在TypeScript中将字符串转换为Type？

如果以上都不可能，我会使用地图，但它不是那么简单，因为我需要实例化的组件将来自远程获取的UMD角度组件库。

Answer 1

您可以执行以下操作：

$html = Invoke-WebRequest -Uri https://www.mcafee.com/enterprise/en-us/downloads/security-updates.html -UseBasicParsing

然后：

const classesMap = {
  AComponentType: AComponentType,
  BComponentType: BComponentType
}

Answer 2

我遇到了同样的问题，我需要使用字符串来选择要构建的组件。经过一番挖掘后，我创建了一个添加到NgModule export和entryComponents列表中的组件的列表。

template-components.ts

export const TEMPLATE_COMPONENTS: Type<any>[] = [
    Temp1Component,
    Temp2Component
  ]

在我的NgModule类中，我只是将TEMPLATE_COMPONENTS添加到exports和entryComponents

在带有ComponentFactoryResolver的组件中，您将生成一个类型列表，其字符串与键相同。

let templateTypes: { [name: string]: Type<{}> } = 
    TEMPLATE_COMPONENTS.reduce((p, c) => { p[c.name] = c; return p }, {})

// templateTypes = {'Temp1Component':Temp1Component,...}

this.componentFactoryResolver.resolveComponentFactory(templateTypes[string]);

这意味着您只需要将组件添加到一个位置即可，从而简化了添加更多组件的过程。

可能可以在单独的列表步骤中跳过整个TEMPLATE_COMPONENTS并直接从NgModule类获取列表，但这将在将来的某个时间。

Angular 5 - 将名称中的组件实例化为字符串

2 个答案: