Angular 5-将组件名称实例化为字符串
我知道如何使用Angular 5-将组件名称实例化为字符串,angular,typescript,components,angular5,umd,Angular,Typescript,Components,Angular5,Umd,我知道如何使用ComponentFactoryResolver.resolveComponentFactory(AComponentType) 但是该方法需要一个类型,而在我的代码中,类型的名称是字符串 在Angular API中是否有通过字符串解析的方法? 如果没有,如何将字符串转换为TypeScript中的类型 如果上述任何一项都不可能实现,我将求助于映射,但它并不是那么简单,因为我需要实例化的组件将来自远程获取的UMD角度组件库。您可以执行以下操作: const classesMap =
ComponentFactoryResolver.resolveComponentFactory(AComponentType)
但是该方法需要一个类型
,而在我的代码中,类型的名称是字符串
在Angular API中是否有通过字符串解析的方法?
如果没有,如何将字符串转换为TypeScript中的类型
如果上述任何一项都不可能实现,我将求助于映射,但它并不是那么简单,因为我需要实例化的组件将来自远程获取的UMD角度组件库。您可以执行以下操作:
const classesMap = {
AComponentType: AComponentType,
BComponentType: BComponentType
}
然后:
CreateDynamicComponent(typeName: string) {
...
const componentFactory = ComponentFactoryResolver.resolveComponentFactory(classesMap[typeName].prototype.constructor)
...
}
我也遇到了同样的问题,我需要使用一个字符串来选择要构建的组件。经过一些挖掘,我创建了一个组件列表,添加到NgModule
export和entryComponents列表中
模板组件
export const TEMPLATE_COMPONENTS: Type<any>[] = [
Temp1Component,
Temp2Component
]
这意味着您只需将零部件添加到一个位置,从而简化了添加更多零部件的过程
可能可以在单独的列表步骤中跳过整个TEMPLATE\u组件
,直接从NgModule
类获取列表,但这将是将来的某个时候。您应该查看以下内容:
let templateTypes: { [name: string]: Type<{}> } =
TEMPLATE_COMPONENTS.reduce((p, c) => { p[c.name] = c; return p }, {})
// templateTypes = {'Temp1Component':Temp1Component,...}
this.componentFactoryResolver.resolveComponentFactory(templateTypes[string]);