如何使用ResolveComponentFactory（），但使用字符串作为键 [英] How to use ResolveComponentFactory() but with a string as a key

问题描述

我想要做的是：

• 使用类似于resolveComponentFactory（）的东西，但使用string标识符以获取组件工厂。


• 获取后，开始利用createComponent（Factory）方法。

Plnkr示例 - > 在此输入链接说明

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

  addItem（componentName：string）：void {
 make compFactory：ComponentFactory; 
 switch（componentName）{
 caseimage：
 compFactory = this.compFactoryResolver.resolveComponentFactory（PictureBoxWidget）; 
 break; 
 casetext：
 compFactory = this.compFactoryResolver.resolveComponentFactory（TextBoxWidget）; 
 break; 
} 
 
 //如何根据字符串
 //解析一个组件，所以我不需要可能的选项的硬成本列表
 
 
 this.container.createComponent（compFactory）; 
  

}

compFactoryResolver：ComponentFactoryResolver

正如您所说，必须在switch语句中对每个置换进行硬编码，这不是理想的。

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

  CodegenComponentFactoryResolver {_parent：AppModuleInjector，_factories：Map} 
  

但是，这张地图是私人的，不能轻易访问（从我可以看出）。

有没有更好的解决方案，然后以某种方式滚动我自己的类来访问这个工厂列表？

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

任何建议或建议都非常感激。

解决方案

它是定义可用组件的映射，

  const compMap = {
 text：PictureBoxWidget，
 image：TextBoxWidget 
}; 
  

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

  const compMap = [PictureBoxWidget，TextBoxWidget] 
 .map（widget => [widget.id，widget]）
 .reduce（（widgets，[id，widget]）=> Object.assign（widgets，{[id]：widget}），{}）; 
  

然后使用地图像

  let compFactory：ComponentFactory; 
 
 if（compMap中的componentName）{
 compFactory = this.compFactoryResolver.resolveComponentFactory（compMap [componentName]）; 
} else {
 throw new Error（'Unknown $ {componentName} component`）; 
} 
  

没有办法组件类可以被神奇地识别为字符串，因为它们是在角度2 DI（从角度1，其中所有DI单位注释为字符串）以来，已经改变了字符串。

what I'm trying to do:

• Use something similar to the "resolveComponentFactory()", but with a 'string' identifier to get Component Factories.
• Once obtained, start leverage the "createComponent(Factory)" method.

Plnkr Example -> enter link description here

In the example, you will see the "AddItem" method

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);

}

The "compFactoryResolver:ComponentFactoryResolver" is injected in the contructor.

As you will note, having to hard code every permutation in a switch statement is less than ideal.

when logging the ComponentFactoryResolver to the console, I've observed that it contains a Map with the various factories.

CodegenComponentFactoryResolver {_parent: AppModuleInjector, _factories: Map}

However, this map is a private and can't be easily accessed (from what I can tell).

Is there a better solution then somehow rolling my own class to get access to this factory list?

I've seen a lot of messages about people trying to create dynamic components. However, these are often about creating components at run time. the components in question here are already pre-defined, I am stuck trying to access factories using a string as a key.

Any suggestions or advice are much appreciated.

Thank you kindly.

解决方案

It's either defining a map of available components,

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

Or defining identifiers as static class property that will be used to generate a map,

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

The map is then used like

let compFactory: ComponentFactory;

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

There's no way how component classes can be magically identified as strings, because they aren't resolved to strings in Angular 2 DI (something that was changed since Angular 1, where all DI units were annotated as strings).

这篇关于如何使用ResolveComponentFactory（），但使用字符串作为键的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！