Angular 添加动态组件2时出错

我正在尝试将组件动态添加到我的应用程序中

我有一个名为formcontainer的组件。我想根据配置在这个组件中加载不同的表单

所以我在google上搜索并尝试动态添加组件，但我发现控制台错误无法读取未定义的属性createComponent。

此.includeTemplate未定义。根据代码错误是正确的，因为值并没有分配给变量。但我所指的例子做了同样的事情，这是有效的

我想我错过了什么

formcontainer组件

    import { Component, OnInit, Input, ElementRef, ComponentFactoryResolver, ViewChild, ViewContainerRef} from '@angular/core';
    import { FORM_DIRECTIVES } from '@angular/forms';

    import {ActivateAccountComponent} from  '/thinkshop/widgets2/thinkshopapplication/activateaccount/activateaccount.ts'


    @Component({
        selector: 'form-container',
        templateUrl: '/thinkshop/widgets2/thinkshopapplication/login/template/landingdisplay.html'
    })

    export class FormContainerComponent implements OnInit{

        @ViewChild('includeTemplate', { read: ViewContainerRef })  
        private includeTemplate: ViewContainerRef;
        private componentRef:ComponentRef<any>;

        constructor(private resolver: ComponentFactoryResolver) {}

        ngOnInit() : void{          

            let componentFactory = this.resolver.resolveComponentFactory(ActivateAccountComponent);
            this.componentRef = this.includeTemplate.createComponent(componentFactory);
            // this.includeTemplate is undefined

        }       
    }

import { Component, ElementRef, ComponentFactoryResolver, ViewChild, ViewContainerRef, AfterViewInit} from '@angular/core';
import { FORM_DIRECTIVES } from '@angular/forms';

import {ActivateAccountComponent} from  '/thinkshop/widgets2/thinkshopapplication/activateaccount/activateaccount.ts'


   @Component({
      selector: 'form-container',
      templateUrl: '/thinkshop/widgets2/thinkshopapplication/login/template/landingdisplay.html'
   })

    export class FormContainerComponent implements AfterViewInit{

        @ViewChild('includeTemplate', { read: ViewContainerRef })  
        private includeTemplate: ViewContainerRef;
        private componentRef:ComponentRef<any>;

        constructor(private resolver: ComponentFactoryResolver) {}     

        ngAfterViewInit() : void{

        setTimeout(() => {
            let componentFactory = this.resolver.resolveComponentFactory(ActivateAccountComponent);
            this.componentRef = this.includeTemplate.createComponent(componentFactory);
        }, 1);      
    }       
    }

import{Component，OnInit，Input，ElementRef，ComponentFactoryResolver，ViewChild，ViewContainerRef}从'@angular/core'导入；
从'@angular/forms'导入{FORM_指令}；
从“/thinkshop/widgets2/thinkshopplication/activateaccount/activateaccount.ts”导入{ActivateAccountComponent}
@组成部分({
选择器：“表单容器”，
templateUrl:“/thinkshop/widgets2/thinkshopplication/login/template/landingdisplay.html”
})
导出类FormContainerComponent实现OnInit{
@ViewChild（'includeTemplate'，{read:ViewContainerRef}）
私有includeTemplate:ViewContainerRef；
私有componentRef:componentRef；
构造函数（专用冲突解决程序：ComponentFactoryResolver）{}
ngOnInit（）：void{
让componentFactory=this.resolver.resolveComponentFactory（ActivateAccountComponent）；
this.componentRef=this.includeTemplate.createComponent（componentFactory）；
//此.includeTemplate未定义
}       
}

激活eAccountComponent

import { Component} from '@angular/core';

@Component({
    selector: 'activate-account',
    template: `<div class="ActivateAccountContainer"> HI </div>`
})

export class ActivateAccountComponent {

    constructor() {}    
}

从'@angular/core'导入{Component}；
@组成部分({
选择器：“激活帐户”，
模板：`嗨`
})
导出类ActivateAccountComponent{
构造函数（）{}
}

landingdisplay.html

<div id="FormContainer" #includeTemplate class="FormContainer ideolveloginform"></div>

正如@MohamedAliRACHID所说，使用了
ngAfterViewInit
代替
ngOnInit
，注释中提到的错误通过将动态组件代码封装到
setTimeout
函数中来解决

这里是formcontainer组件

    import { Component, OnInit, Input, ElementRef, ComponentFactoryResolver, ViewChild, ViewContainerRef} from '@angular/core';
    import { FORM_DIRECTIVES } from '@angular/forms';

    import {ActivateAccountComponent} from  '/thinkshop/widgets2/thinkshopapplication/activateaccount/activateaccount.ts'


    @Component({
        selector: 'form-container',
        templateUrl: '/thinkshop/widgets2/thinkshopapplication/login/template/landingdisplay.html'
    })

    export class FormContainerComponent implements OnInit{

        @ViewChild('includeTemplate', { read: ViewContainerRef })  
        private includeTemplate: ViewContainerRef;
        private componentRef:ComponentRef<any>;

        constructor(private resolver: ComponentFactoryResolver) {}

        ngOnInit() : void{          

            let componentFactory = this.resolver.resolveComponentFactory(ActivateAccountComponent);
            this.componentRef = this.includeTemplate.createComponent(componentFactory);
            // this.includeTemplate is undefined

        }       
    }

import { Component, ElementRef, ComponentFactoryResolver, ViewChild, ViewContainerRef, AfterViewInit} from '@angular/core';
import { FORM_DIRECTIVES } from '@angular/forms';

import {ActivateAccountComponent} from  '/thinkshop/widgets2/thinkshopapplication/activateaccount/activateaccount.ts'


   @Component({
      selector: 'form-container',
      templateUrl: '/thinkshop/widgets2/thinkshopapplication/login/template/landingdisplay.html'
   })

    export class FormContainerComponent implements AfterViewInit{

        @ViewChild('includeTemplate', { read: ViewContainerRef })  
        private includeTemplate: ViewContainerRef;
        private componentRef:ComponentRef<any>;

        constructor(private resolver: ComponentFactoryResolver) {}     

        ngAfterViewInit() : void{

        setTimeout(() => {
            let componentFactory = this.resolver.resolveComponentFactory(ActivateAccountComponent);
            this.componentRef = this.includeTemplate.createComponent(componentFactory);
        }, 1);      
    }       
    }

import{Component，ElementRef，ComponentFactoryResolver，ViewChild，ViewContainerRef，AfterViewInit}从'@angular/core'导入；
从'@angular/forms'导入{FORM_指令}；
从“/thinkshop/widgets2/thinkshopplication/activateaccount/activateaccount.ts”导入{ActivateAccountComponent}
@组成部分({
选择器：“表单容器”，
templateUrl:“/thinkshop/widgets2/thinkshopplication/login/template/landingdisplay.html”
})
导出类FormContainerComponent在ViewInit之后实现{
@ViewChild（'includeTemplate'，{read:ViewContainerRef}）
私有includeTemplate:ViewContainerRef；
私有componentRef:componentRef；
构造函数（专用冲突解决程序：ComponentFactoryResolver）{}
ngAfterViewInit（）：void{
设置超时（（）=>{
让componentFactory=this.resolver.resolveComponentFactory（ActivateAccountComponent）；
this.componentRef=this.includeTemplate.createComponent（componentFactory）；
}, 1);      
}       
}
正如@MohamedAliRACHID所说，使用了
ngAfterViewInit
代替
ngOnInit
，注释中提到的错误通过将动态组件代码封装到
setTimeout
函数中来解决

这里是formcontainer组件

    import { Component, OnInit, Input, ElementRef, ComponentFactoryResolver, ViewChild, ViewContainerRef} from '@angular/core';
    import { FORM_DIRECTIVES } from '@angular/forms';

    import {ActivateAccountComponent} from  '/thinkshop/widgets2/thinkshopapplication/activateaccount/activateaccount.ts'


    @Component({
        selector: 'form-container',
        templateUrl: '/thinkshop/widgets2/thinkshopapplication/login/template/landingdisplay.html'
    })

    export class FormContainerComponent implements OnInit{

        @ViewChild('includeTemplate', { read: ViewContainerRef })  
        private includeTemplate: ViewContainerRef;
        private componentRef:ComponentRef<any>;

        constructor(private resolver: ComponentFactoryResolver) {}

        ngOnInit() : void{          

            let componentFactory = this.resolver.resolveComponentFactory(ActivateAccountComponent);
            this.componentRef = this.includeTemplate.createComponent(componentFactory);
            // this.includeTemplate is undefined

        }       
    }

import { Component, ElementRef, ComponentFactoryResolver, ViewChild, ViewContainerRef, AfterViewInit} from '@angular/core';
import { FORM_DIRECTIVES } from '@angular/forms';

import {ActivateAccountComponent} from  '/thinkshop/widgets2/thinkshopapplication/activateaccount/activateaccount.ts'


   @Component({
      selector: 'form-container',
      templateUrl: '/thinkshop/widgets2/thinkshopapplication/login/template/landingdisplay.html'
   })

    export class FormContainerComponent implements AfterViewInit{

        @ViewChild('includeTemplate', { read: ViewContainerRef })  
        private includeTemplate: ViewContainerRef;
        private componentRef:ComponentRef<any>;

        constructor(private resolver: ComponentFactoryResolver) {}     

        ngAfterViewInit() : void{

        setTimeout(() => {
            let componentFactory = this.resolver.resolveComponentFactory(ActivateAccountComponent);
            this.componentRef = this.includeTemplate.createComponent(componentFactory);
        }, 1);      
    }       
    }

import{Component，ElementRef，ComponentFactoryResolver，ViewChild，ViewContainerRef，AfterViewInit}从'@angular/core'导入；
从'@angular/forms'导入{FORM_指令}；
从“/thinkshop/widgets2/thinkshopplication/activateaccount/activateaccount.ts”导入{ActivateAccountComponent}
@组成部分({
选择器：“表单容器”，
templateUrl:“/thinkshop/widgets2/thinkshopplication/login/template/landingdisplay.html”
})
导出类FormContainerComponent在ViewInit之后实现{
@ViewChild（'includeTemplate'，{read:ViewContainerRef}）
私有includeTemplate:ViewContainerRef；
私有componentRef:componentRef；
构造函数（专用冲突解决程序：ComponentFactoryResolver）{}
ngAfterViewInit（）：void{
设置超时（（）=>{
让componentFactory=this.resolver.resolveComponentFactory（ActivateAccountComponent）；
this.componentRef=this.includeTemplate.createComponent（componentFactory）；
}, 1);      
}       
}
这似乎是对的。您到landingdisplay.html的路径正确吗？尝试在组件中嵌入html，看看它是否有效。像这样：模板：'@JasonLutz ok。我试试看。但模板将比当前模板大。所以我把这个模板保存在单独的文件中。一旦你们测试了它，你们可以再把它放在一个单独的模板中，但我想先确保它是内联工作的。模板看起来很对，所以我想问题可能是路径。@JasonLutz是的，它正在工作。好的，再检查一下你的路径。在第一次斜杠之前需要一个句号吗？这似乎是对的。您到landingdisplay.html的路径正确吗？尝试在组件中嵌入html，看看它是否有效。像这样：模板：'@JasonLutz ok。我试试看。但模板将比当前模板大。所以我把这个模板保存在单独的文件中。一旦你们测试了它，你们可以再把它放在一个单独的模板中，但我想先确保它是内联工作的。模板看起来很对，所以我想问题可能是路径。@JasonLutz是的，它正在工作。好的，再检查一下你的路径。在第一个斜杠之前需要句号吗？