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

问题描述

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

错误:未捕获(承诺):类型错误:无法读取未定义的属性createComponent"在 resolvePromise (zone.js:538)在 zone.js:574在 ZoneDelegate.invokeTask (zone.js:356)在 Object.onInvokeTask (lib/@angular/core/bundles/core.umd.js:9091)在 ZoneDelegate.invokeTask (zone.js:355)在 Zone.runTask (zone.js:256)在drainMicroTaskQueue (zone.js:474)在 XMLHttpRequest.ZoneTask.invoke (zone.js:426)BrowserDomAdapter.logError @ lib/@angular/platform-b​​rowser/bundles/platform-b​​rowser.umd.js:1900zone.js:461 未处理的承诺拒绝:无法读取未定义的属性createComponent"；区域:角度；任务:Promise.then；值:TypeError:无法读取 undefined(…)consoleError @ zone.js:461 的属性createComponent"zone.js:463 错误:未捕获(承诺):类型错误:无法读取 undefined(…)consoleError @ zone.js:463 的属性createComponent"

我的父组件

import { Component, ViewChild, ViewContainerRef, ComponentResolver, Injector } from '@angular/core';从 './ExtractorDetails' 导入 { ExtractorDetails };声明 var kendo: 任何;@成分({选择器:'剑道网格'，templateUrl: './HTML/Admin/KendoGrid.html',提供者:[配置，常量]，指令:[Grid, ExtractorDetails]})导出类 ExtractorQueueGrid {@ViewChild(ExtractorDetails, { read: ViewContainerRef }) childContainer;选项:任何；行对象:任何；构造函数(私有 configSetttings:配置，私有常量:常量，私有 _injector:注入器，私有 viewContainer:ViewContainerRef，私有 _cr:ComponentResolver){this.setUpGridOptions();}onChange(事件){console.log("点击事件调用");console.log("事件" + 事件);event.preventDefault();this.rowObject = event.target;console.log("队列 ID:" + this.rowObject.parentElement.cells[0].innerText);this._cr.resolveComponent(ExtractorDetails).then(cmpFactory => {console.log("创建组件");this.childContainer.createComponent(cmpFactory,null, this._injector);让 cmpRef = this.childContainer.createComponent(cmpFactory);cmpRef.instance.ExtractorID = this.rowObject.parentElement.cells[0].innerText;//需要传递给子组件的输入参数});}}

我的子组件

import { Component, Input } from '@angular/core';@成分({选择器:'extractordetails'，templateUrl: './HTML/Admin/ExtractorDetails.html'})导出类 ExtractorDetails {@Input() ExtractorID : 任何;构造函数(){console.log("ExtractorDetails 组件已加载");}}

./HTML/Admin/KendoGrid.html"文件下方

<k-grid [options]="options" (click)="onChange($event)"></k-grid>
<div><h3>装载机</h3><div id="extractorqueue-details">此处加载的提取器详细信息</div>

解决方案

var self = this;this._cr.resolveComponent(ExtractorDetails).then(cmpFactory => {console.log("创建组件");self.childContainer.createComponent(cmpFactory,null, this._injector);让 cmpRef = self.childContainer.createComponent(cmpFactory);cmpRef.instance.ExtractorID = self.rowObject.parentElement.cells[0].innerText;//需要传递给子组件的输入参数});}

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

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

My Parent component

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

}

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

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.

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