I've been looking at the Angular 2 APIs for ComponentResolver
and DynamicComponentResolver
for creating dynamic components, but I have something different in mind than those APIs offer.
Is there any way in NG2 to create a component based on a string of its class name?
For example, Im building a configurable charts dashboard. Each user's layout is stored in the database, stating they want 2x line charts here, 3x bar charts there, etc.
When I load this data as json it looks something like:
user.charts = [
{ type: 'LineChartComponent', position: ... }
{ type: 'BarChartComponent', position: ... }
];
Where type
is the component's class name that I want to reflectively create.
So far I have the following:
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);
But the whole idea is to eliminate the need for chartMap
. How can I reflectively create this class based on a string without having a reference to the type?
Update2:
As @estus mentioned in comments version with className won't work with minification. To do it working with minification you can
1) add some static key on each of your entryComponents
like:
export LineChartComponent {
static key = "LineChartComponent";
}
and then use this key
as unique.
const factoryClass = <Type<any>>factories.find((x: any) => x.key === compClassKey);
2) create a dictionary like
export const entryComponentsMap = {
'comp1': Component1,
'comp2': Component2,
'comp3': Component3
};
and then
const factory = this.resolver.resolveComponentFactory(entryComponentsMap.comp1);
Update1:
Here's version from component`s class name
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);
Old version
You can get factory by component selector but you have to use private property.
It might look something like:
const factories = Array.from(this.resolver['_factories'].values());
const factory = factories.find((x: any) => x.selector === selector);