如何使用ResolveComponentFactory（），但使用字符串作为键

本文介绍了如何使用ResolveComponentFactory（），但使用字符串作为键的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我想要做的是：

• 使用类似于resolveComponentFactory（）的东西，但使用string标识符以获取组件工厂。
• 获取后，开始利用createComponent（Factory）方法。

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

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

addItem（componentName：string）：void { make compFactory：ComponentFactory; switch（componentName）{ caseimage： compFactory = thispFactoryResolver.resolveComponentFactory（PictureBoxWidget）; break; casetext： compFactory = thispFactoryResolver.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 = thispFactoryResolver.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 = thispFactoryResolver.resolveComponentFactory(PictureBoxWidget); break; case "text": compFactory = thispFactoryResolver.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 = thispFactoryResolver.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).