When attempting to load a dynamic component into the root component using viewContainerRef.createComponent, I encountered an issue where it appended to the wrong place.
https://i.stack.imgur.com/lF1yT.png
Here is my code:
-----app.compoment.ts-----
export class AppComponent {
private viewContainerRef:ViewContainerRef;
public constructor(viewContainerRef:ViewContainerRef) {
this.viewContainerRef = viewContainerRef;
}
}
-----a.service.ts------
@Injectable()
export class ModalService {
private viewContainerRef:ViewContainerRef;
constructor(applicationRef: ApplicationRef, injector: Injector,private compiler: ComponentResolver) {
var classOfRootComponent = applicationRef.componentTypes[0];
// this is an instance of application bootstrap component
var appInstance = injector.get(classOfRootComponent);
this.viewContainerRef= appInstance.viewContainerRef;
}
alert() {console.log(this.viewContainerRef);
this.compiler.resolveComponent(ModalComponent)
.then(
(factory) =>
this.viewContainerRef.createComponent(factory, 0, this.viewContainerRef.injector)
).then((componentRef) => {
return componentRef;
}
);
}
}