我一直在看ComponentResolver
和DynamicComponentResolver
的Angular 2 api,用于创建动态组件,但我有一些不同于这些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
的需求。我如何在没有引用类型的情况下基于字符串反射地创建这个类?
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中使用组件名动态加载组件?
你可以通过组件选择器获得factory,但是你必须使用私有属性。
它可能看起来像:
const factories = Array.from(this.resolver['_factories'].values());
const factory = factories.find((x: any) => x.selector === selector);
<<p> 恰好例子/strong> 也可以遍历import:
import * as possibleComponents from './someComponentLocation'
...
let inputComponent;
for(var key in possibleComponents ){
if(key == componentStringName){
inputComponent = possibleComponents[key];
break;
}
}
更新:或者只是:-)
let inputComponent = possibleComponents[componentStringName]
则可以创建组件的实例,例如:
if (inputComponent) {
let inputs = {model: model};
let inputProviders = Object.keys(inputs).map((inputName) => { return { provide: inputName, useValue: inputs[inputName] }; });
let resolvedInputs = ReflectiveInjector.resolve(inputProviders);
let injector: ReflectiveInjector = ReflectiveInjector.fromResolvedProviders(resolvedInputs, this.dynamicInsert.parentInjector);
let factory = this.resolver.resolveComponentFactory(inputComponent as any);
let component = factory.create(injector);
this.dynamicInsert.insert(component.hostView);
}
注意,component必须在@NgModule entryComponents