ng2 - 基于模板动态创建组件

Question

我一直在研究Angular 2 API ComponentResolver以及DynamicComponentResolver创建动态组件,但我有一些不同于那些API提供的东西.

在NG2中是否有任何方法可以基于其类名字符串创建组件？

例如,我正在构建一个可配置的图表仪表板.每个用户的布局都存储在数据库中,说明他们需要2x折线图,3x条形图等.

当我将这些数据加载为json时,它看起来像:

user.charts = [
     { type: 'LineChartComponent', position: ... }
     { type: 'BarChartComponent', position: ... }
];

type我想要反射创建的组件的类名在哪里.

到目前为止,我有以下内容:

 this.chartMap = {
    'LineChartComponent': LineChartComponent
 };

let config = this.configuration;
let chartComponentType = this.chartMap[config.type];
let factory = this.componentFactory.resolveComponentFactory(chartComponentType);
let component = factory.create(this.injector);
component.instance.configuration = config;
this.chartContainer.insert(component.hostView);

但整个想法是消除对的需要chartMap.如何在不引用类型的情况下基于字符串反射性地创建此类？

Answer 1

UPDATE2:

正如@estus在评论中提到的那样,带有className的版本不适用于缩小.要做到这一点,你可以做到缩小

1)在你的每个上添加一些静态键entryComponents:

export LineChartComponent {
  static key = "LineChartComponent";
}

然后使用它key作为唯一.

const factoryClass = <Type<any>>factories.find((x: any) => x.key === compClassKey);

2)创建字典就好

export const entryComponentsMap = {
  'comp1': Component1,
  'comp2': Component2,
  'comp3': Component3
};

然后

const factory = this.resolver.resolveComponentFactory(entryComponentsMap.comp1);

UPDATE1:

这是组件类名的版本

const factories = Array.from(this.resolver['_factories'].keys());
const factoryClass = <Type<any>>factories.find((x: any) => x.name === compClassName);
const factory = this.resolver.resolveComponentFactory(factoryClass);

• 如何使用angular2中的组件名称动态加载组件？

旧版

您可以按组件选择器获取工厂,但必须使用私有属性.

它可能看起来像:

const factories = Array.from(this.resolver['_factories'].values());
const factory = factories.find((x: any) => x.selector === selector);

Plunker示例