動的コンポーネントを追加中にエラーが発生する角度2

Question

コンポーネントを動的にアプリケーションに追加しようとしています。

フォームコンテナというコンポーネントがあります。私は設定に従ってこのコンポーネント内に異なるフォームをロードしたい。

Googleで検索し、コンポーネントを動的に追加しようとしましたが、コンソールエラーが発生しています。 プロパティcreateComponentは未定義です。 this.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 

     }  
    } 

ActivateAccountComponent

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

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

export class ActivateAccountComponent { 

    constructor() {}  
} 

landingdisplay.html

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

Answer 1

@MohamedAliRACHIDはngOnInitの代わりにngAfterViewInitと記載されており、動的コンポーネントコードをsetTimeout関数に囲むことでコメントに記載されているエラーを解決しています。ここで

はこれが正しいように思わformcontainerコンポーネント

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