Ng2——基于模板动态创建组件



我一直在看ComponentResolverDynamicComponentResolver的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

相关内容

  • 没有找到相关文章

最新更新