TypeError:无法读取未定义的属性"createComponent" [英] TypeError: Cannot read property 'createComponent' of undefined

问题描述

我正在尝试从父组件动态加载组件.在加载子组件时，我还需要传递一些输入参数.但是我在浏览器控制台中收到以下错误.

I am trying to load a component dynamically from a parent component. While loading the child component I need to pass some input parameter as well. But I am getting the following error in the browser console.

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"文件

"./HTML/Admin/KendoGrid.html" File below

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

推荐答案

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

尝试一下.在then回调内部，this实际上是指调用您的回调的作用域.通过使用self，您可以引用定义了回调的作用域.

Try this. Inside the then callback, this actually refers to the scope that is calling your callback. By using self you can refer to the scope where the callback was defined.

这篇关于TypeError:无法读取未定义的属性"createComponent"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！