TypeError: Die Eigenschaft 'createComponent' von undefined @ kann nicht gelesen werd
Ich versuche, eine Komponente dynamisch von einer übergeordneten Komponente zu laden. Beim Laden der untergeordneten Komponente muss ich auch einige Eingabeparameter übergeben. In der Browserkonsole wird jedoch der folgende Fehler angezeigt.
Error: Uncaught (in promise): TypeError: Cannot read property 'createComponent' of undefined
at resolvePromise (zone.js:538)
at zone.js:574
at ZoneDelegate.invokeTask (zone.js:356)
at Object.onInvokeTask (lib/@angular/core/bundles/core.umd.js:9091)
at ZoneDelegate.invokeTask (zone.js:355)
at Zone.runTask (zone.js:256)
at drainMicroTaskQueue (zone.js:474)
at XMLHttpRequest.ZoneTask.invoke (zone.js:426)BrowserDomAdapter.logError @ lib/@angular/platform-browser/bundles/platform-browser.umd.js:1900
zone.js:461 Unhandled Promise rejection: Cannot read property 'createComponent' of undefined ; Zone: angular ; Task: Promise.then ; Value: TypeError: Cannot read property 'createComponent' of undefined(…)consoleError @ zone.js:461
zone.js:463 Error: Uncaught (in promise): TypeError: Cannot read property 'createComponent' of undefined(…)consoleError @ zone.js:463
Meine übergeordnete Komponente
import { Component, ViewChild, ViewContainerRef, ComponentResolver, Injector } from '@angular/core';
import { ExtractorDetails } from './ExtractorDetails';
declare var kendo: any;
@Component({
selector: 'kendo-grid',
templateUrl: './HTML/Admin/KendoGrid.html',
providers: [Configuration, Constants ],
directives: [Grid, ExtractorDetails]
})
export class ExtractorQueueGrid {
@ViewChild(ExtractorDetails, { read: ViewContainerRef }) childContainer;
options: any;
rowObject: any;
constructor(private configSetttings: Configuration, private constants: Constants, private _injector: Injector, private viewContainer: ViewContainerRef, private _cr: ComponentResolver) {
this.setUpGridOptions();
}
onChange(event) {
console.log("click event called");
console.log("event " + event);
event.preventDefault();
this.rowObject = event.target;
console.log("Queue ID : " + this.rowObject.parentElement.cells[0].innerText);
this._cr.resolveComponent(ExtractorDetails).then(cmpFactory => {
console.log("Creating component");
this.childContainer.createComponent(cmpFactory,null, this._injector);
let cmpRef = this.childContainer.createComponent(cmpFactory);
cmpRef.instance.ExtractorID = this.rowObject.parentElement.cells[0].innerText; //Input paramter which need to be passed to child component
});
}
}
Meine untergeordnete Komponente
import { Component, Input } from '@angular/core';
@Component({
selector: 'extractordetails',
templateUrl: './HTML/Admin/ExtractorDetails.html'
})
export class ExtractorDetails {
@Input() ExtractorID : any;
constructor()
{
console.log("ExtractorDetails component is loaded");
}
}
"./ HTML / Admin / KendoGrid.html" Datei unten
<div>
<k-grid [options]="options" (click)="onChange($event)"></k-grid>
</div>
<div>
<h3>Loader</h3>
<div id="extractorqueue-details">Extractor Details loaded here</div>
</div>