I've been utilizing code similar to this to dynamically generate components within my application. These components need to support dynamic inputs. However, upon attempting to upgrade to Angular 5, I've encountered an issue with ReflectiveInjector being deprecated. If anyone has any insights on how to adapt this for use with Angular 5, I would greatly appreciate the assistance...
import {Component, Input, ViewContainerRef, ViewChild, ReflectiveInjector, ComponentFactoryResolver} from '@angular/core';
import {
AComponent,
BComponent,
CComponent
} from './';
@Component({
selector: 'dynamic-component',
entryComponents: [
AComponent,
BComponent,
CComponent
],
template: `
<div #dynamicComponentContainer></div>
`
})
export class DynamicComponent {
currentComponent = null;
@ViewChild('dynamicPriceItemComponentContainer', { read: ViewContainerRef }) dynamicComponentContainer: ViewContainerRef;
@Input() set componentData( data: { component: any, inputs: any }) {
if (!data) {
return;
}
let inputProviders = Object.keys(data.inputs).map((inputName) => {
return { provide: inputName, useValue: data.inputs[inputName] };
});
let resolvedInputs = ReflectiveInjector.resolve(inputProviders);
let injector = ReflectiveInjector.fromResolvedProviders(resolvedInputs, this.dynamicPriceItemComponentContainer.parentInjector);
let factory = this.resolver.resolveComponentFactory(data.component);
let component = factory.create(injector);
this.dynamicComponentContainer.insert(component.hostView);
if (this.currentComponent) {
this.currentComponent.destroy();
}
this.currentComponent = component;
}
constructor(private resolver: ComponentFactoryResolver) {
}
}