I have an issue about creating new Components with the resolveComponentFactory. First there is a startComponent (parent component) and from this component there are several buttons and every btn creates an new child Component. For example now I create a "childComponent" and this also works. But now I want to create an new childComponent within the childComponent and this new component shall have the startComponent as parent component, not the childComponent itself. So I Need a way to call the addComponent() method from the startComponent with my childComponent.
Here is the way I'm doing it at the moment:
startComponent.ts:
import {
Component, OnInit, ViewChild,
ComponentFactoryResolver,
ViewContainerRef
} from '@angular/core';
Import { childComponent } from '../childComponent/child.component';
import { DataService } from '../data.service';
@Component({
selector: 'app-start',
templateUrl: './start.component.html',
styleUrls: ['./start.component.css']
})
export class startComponent implements OnInit {
@ViewChild('parent', { read: ViewContainerRef }) container: ViewContainerRef;
constructor(private dataService: DataService, private componentFactoryResolver: ComponentFactoryResolver){}
ngOnInit(){}
addComponent(){
let componentFactory = this.componentFactoryResolver.resolveComponentFactory(childComponent);
let component = this.container.createComponent(componentFactory);
// next Line i save the reference of the "childComponent" to a Service
// so the "childComponent" can get it and destroy himself if wanted
this.createComponentService.setReference(component, type);
}
}
startComponent.html
<div>
<span matTooltip="Select"><button (click)="addComponent()" class="btn">
<img class="img" src="./assets/StartIcons/childCreate-icon.png" alt="not found"> </button></span>
</div>
<div #parent></div>
It does work if I want to create a childComponent with my childComponent, but the startComponent is not the parent component then. I hope you understand my Problem, else I can try to explain it again.
But now I want to create an new childComponent within the childComponent and this new component shall have the startComponent as parent component, not the childComponent itself. So I Need a way to call the addComponent() method from the startComponent with my childComponent.
So, in childComponent you should have reference to parentComponent(StartComponent). You can get it by injecting to new added childComponent:
childComponent:
constructor(private parentComp: StartComponent){
}
As you have reference to it, you get access to properties, methods of parent and within childComponent can call addComponent() easily like:
parentComp.addComponent();
Interesting, dynamically created component doesn't have parent component in injector. So, it can't inject parent StartComponent.
Set child component's parent property with StartComponet:
ngOnInit() {
this.comps.clear();
let aComponentFactory =
this.componentFactoryResolver.resolveComponentFactory(this.compArr[0]);
let aComponentRef = this.comps.createComponent(aComponentFactory);
(<AComponent>aComponentRef.instance).name = 'A name';
(<AComponent>aComponentRef.instance).parent = this;
}
StackBlitz Demo. Look at the console
Manually inject parent component in child:
constructor(public injector: Injector ) {
console.log('child injector', injector);
this.parent = injector.get(AppComponent);
}
ngOnInit() {
console.log('parent is here', this.parent);
this.parent.test();
}
StackBlitz Demo. Look at the console
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments