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

＆＃34; ./ HTML /管理/ KendoGrid.html＆＃34;文件如下

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

试试这个。在then回调中，this实际上是指调用回调的范围。通过使用self，您可以参考定义回调的范围。

TypeError：无法读取属性＆＃39; createComponent＆＃39;未定义的

1 个答案: