Reputation: 12025
I create dynamically a child component this.data.component
using resolveComponentFactory
:
export class MyDialogComponent implements OnInit, OnDestroy {
@ViewChild("target", { static: true , read: ViewContainerRef}) viewContainerRef: ViewContainerRef;
componentRef: ComponentRef<any>;
constructor(
private resolver: ComponentFactoryResolver,
@Inject(MAT_DIALOG_DATA) public data: any
) {}
ngOnInit() {
const factory = this.resolver.resolveComponentFactory(this.data.component);
this.componentRef = this.viewContainerRef.createComponent(factory);
}
ngOnDestroy() {
if (this.componentRef) {
this.componentRef.destroy();
}
}
}
Child component looks:
@Component({
selector: "simple-dict-word-dialog",
templateUrl: "./dictionarySimpleWord-dialog.component.html"
})
export class DictionarySimpleDialogComponent {
}
How to get access in child component to object this.data
?
I tried this:
const factory = this.resolver.resolveComponentFactory(this.data.component);
this.componentRef = this.viewContainerRef.createComponent(factory);
this.componentRef.instance.type = "ok";
this.componentRef.instance.mode = {id: 1};
And my child component is:
export class DictionarySimpleDialogComponent implements OnInit {
@Input() model: ClassificatorOrganizations;
@Input() type: string;
ngOnInit() {
console.log(this.type);
console.log(this.model);
}
}
So, I can not get:
console.log(this.type);
console.log(this.model);
They are empty
Upvotes: 0
Views: 117
Reputation: 3868
ComponentRef
has the instance
property that is your child component instance. You can pass your data to it as provided in Angular 2 dynamically add component instance into container.
Upvotes: 1