如何使用 ResolveComponentFactory() 但使用字符串作为键

Question

我想做什么：

使用类似于“resolveComponentFactory()”的方法，但使用 'string' 标识符来获取组件工厂。
获得后，开始利用“createComponent(Factory)”方法。

在示例中，您将看到 AddItem 方法

addItem(componentName:string):void{
    let compFactory: ComponentFactory;

    switch(componentName){
        case "image":
            compFactory = this.compFactoryResolver.resolveComponentFactory(PictureBoxWidget);
            break;
        case "text":
            compFactory = this.compFactoryResolver.resolveComponentFactory(TextBoxWidget);
            break;
    }
    
    //How can I resolve a component based on string
    //so I don't need to hard cost list of possible options
    
    this.container.createComponent(compFactory);
}

构造函数中注入了“compFactoryResolver:ComponentFactoryResolver”。

您会注意到，必须对 switch 语句中的每个排列进行硬编码并不理想。

将 ComponentFactoryResolver 记录到控制台时，我观察到它包含一个包含各种工厂的 Map。

CodegenComponentFactoryResolver {_parent: AppModuleInjector, _factories: Map}

但是，这张地图是私人的，不能轻易访问（据我所知）。

是否有更好的解决方案然后以某种方式滚动我自己的 class 以访问此工厂列表？

我看到很多关于人们试图创建动态组件的消息。但是，这些通常是关于在运行时间创建组件。这里有问题的组件已经预定义，我一直在尝试使用字符串作为键来访问工厂。

非常感谢任何建议。

谢谢你。

Answer 1

它要么定义可用组件的映射，

const compMap = {
  text: PictureBoxWidget,
  image: TextBoxWidget
};

或将标识符定义为静态 class 属性将用于生成地图，

const compMap = [PictureBoxWidget, TextBoxWidget]
.map(widget => [widget.id, widget])
.reduce((widgets, [id, widget]) => Object.assign(widgets, { [id]: widget }), {});

地图然后像这样使用

let compFactory: ComponentFactory;

if (componentName in compMap) {
    compFactory = this.compFactoryResolver.resolveComponentFactory(compMap[componentName]);
} else {
    throw new Error(`Unknown ${componentName} component`);
}

无法将组件 classes 神奇地识别为字符串，因为它们在 Angular 2 DI 中未解析为字符串（自 Angular 以来发生了变化） 1，其中所有 DI 单元都被注释为字符串）。

如何使用 ResolveComponentFactory() 但使用字符串作为键

How to use ResolveComponentFactory() but with a string as a key

dynamic

typescript

angular2-components

angular