如何使用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屋!