TypeError: Не удается прочитать свойство «createComponent» undefined

Question

Я пытаюсь загрузить компонент динамически из родительского компонента. При загрузке дочернего компонента мне нужно также передать некоторый входной параметр. Но я получаю следующую ошибку в консоли браузера.

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 

Мой родительский компонент

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 
      }); 
    } 

} 

Мой ребенок компонент

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" Файл ниже

<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> 

Answer 1

var self = this; 
this._cr.resolveComponent(ExtractorDetails).then(cmpFactory => { 
      console.log("Creating component"); 

      self.childContainer.createComponent(cmpFactory,null, this._injector); 
      let cmpRef = self.childContainer.createComponent(cmpFactory); 
      cmpRef.instance.ExtractorID = self.rowObject.parentElement.cells[0].innerText; //Input paramter which need to be passed to child component 
     }); 
} 

Попробуйте это. Внутри обратного вызова thenthis фактически ссылается на область действия, вызывающую ваш обратный вызов. Используя self, вы можете обратиться к области, в которой был определен обратный вызов.