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

我想做什么:

>使用类似于“resolveComponentFactory()”的东西,但使用’string’标识符来获取组件工厂.
>获得后,开始利用“createComponent(Factory)”方法.

Plnkr示例 – > enter link description here

在该示例中,您将看到“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}

但是,这张地图是私人的,无法轻易访问(据我所知).

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

我看过很多关于人们试图创建动态组件的消息.但是,这些通常是在运行时创建组件.这里讨论的组件已经预先定义,我试图使用字符串作为密钥来访问工厂.

任何建议或建议都非常感谢.

非常感谢你.

它要么定义可用组件的映射,
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 (componentName in compMap) {
    compFactory = this.compFactoryResolver.resolveComponentFactory(compMap[componentName]);
} else {
    throw new Error(`Unknown ${componentName} component`);
}

组件类没有办法神奇地识别为字符串,因为它们没有被解析为Angular 2 DI中的字符串(自Angular 1以来已经改变了,其中所有DI单元都注释为字符串).

相关文章

AngularJS 是一个JavaScript 框架。它可通过 注:建议把脚本放在 元素的底部。这会提高网页加载速度,因...
angluarjs中页面初始化的时候会出现语法{{}}在页面中问题,也即是页面闪烁问题。出现这个的原因是:由于...
AngularJS 通过被称为指令的新属性来扩展 HTML。AngularJS 指令AngularJS 指令是扩展的 HTML 属性,带有...
AngularJS 使用表达式把数据绑定到 HTML。AngularJS 表达式AngularJS 表达式写在双大括号内:{{ expres...
ng-repeat 指令可以完美的显示表格。在表格中显示数据 {{ x.Name }} {{ x.Country }} 使用 CSS 样式为了...
$http是 AngularJS 中的一个核心服务,用于读取远程服务器的数据。读取 JSON 文件下是存储在web服务器上...