I'm getting a circular dependency
error on my @ComponentBuilderService
service, because some of the components that I'm importing in ie.BreakComponent
,LocationComponent
use this service and also import this @ComponentBuilderService
.
What I'm trying to do is use the buildComponents()
method inside this @ComponentBuilderService
to be able to dynamically create components, the problem is some of the components need to use this buildComponents()
method on this same service to build their sub-components.
@ComponentBuilderService:
@Injectable()
export class ComponentBuilderService {
private renderer: Renderer2;
constructor(private resolver: ComponentFactoryResolver, renderFactory: RendererFactory2) {
this.renderer = renderFactory.createRenderer(null, null);
}
buildComponents(nContainer: ViewContainerRef , elements) {
// loop through elements creating different components based on element.Type
elements.forEach((element, idx) => {
switch (element.Type) {
case 'break':
const breakComponent = nContainer.createComponent(this.resolver.resolveComponentFactory(BreakComponent));
console.log(breakComponent.location.nativeElement);
break;
case 'location':
const locationComponent = nContainer.createComponent(this.resolver.resolveComponentFactory(LocationComponent));
locationComponent.instance.Elements = element.Elements;
break;
}
});
}
}
@LocationComponent:
import { Component, AfterContentInit } from '@angular/core';
import { ComponentBuilder } from '../../../shared/services/component-build.service';
@Component({
selector: 'location',
template: `<div> some location building </div>`,
styleUrls: ['./location.component.scss'],
})
export class LocationComponent implements AfterContentInit {
Elements;
constructor(private componentBuilder: ComponentBuilder) { }
ngAfterContentInit() {
console.log(this.Elements);
this.componentBuilder.buildComponents(this.Elements);
}
}
Question: Is there anyway to create a ComponentBuilderService
?