Как динамически создать компонент на ngOnInit ()?

Question

Как вы можете динамически создать компонент в ngOnInit ()?

При создании компонента в ngOnInit я получаю сообщение об ошибке "Не удается прочитать свойство 'clear' of undefined".

Вот мой компонент:

import { Component, OnInit, ViewChild, ViewContainerRef, ComponentFactoryResolver, ComponentRef, ComponentFactory } from '@angular/core';
import { SpinnerService } from '../../tools/spinner/spinner.service';
import { CardService } from './card.service';
import { CardDatagridComponent } from './card-datagrid/card-datagrid.component';

@Component({
  selector: 'app-card',
  templateUrl: './card.component.html',
  styleUrls: ['./card.component.scss']
})
export class CardComponent implements OnInit {
  @ViewChild("cardDataGridContainer", { read: ViewContainerRef }) container;
  public renderReady: boolean = false;
  public componentRef: ComponentRef<any>;
  public selectedStatus = 'A';

  constructor(private spinner: SpinnerService, private cardService: CardService, private resolver: ComponentFactoryResolver) { }

  ngOnInit() {
    this.spinner.show();
    setTimeout(() => {
      this.spinner.hide();
      this.renderReady = true;
    }, 2000);
    this.selectTabStatus(this.selectedStatus);
  }

  selectTabStatus(status) {
    this.selectedStatus = status;
    this.createComponent(status);
  }

  createComponent(status) {
    this.container.clear();
    const factory: ComponentFactory<any> = this.resolver.resolveComponentFactory(CardDatagridComponent)
    this.componentRef = this.container.createComponent(factory);
    this.componentRef.instance.cardStatus = status;
  }

  ngOnDestroy() {
    this.componentRef.destroy(); 
  }
}

Любое предложение, ребята?Спасибо!

Answer 1

AngularJS! == Angular, вы должны удалить тег.И, возможно, добавьте «Typescript»

, в любом случае, здесь я выполнил то, что вы ищете

Blitz

В Angular4 + Renderer2 было добавлено так:

import {Renderer2, ElementRef} from "@angular/core";

constructor(private targetEl: ElementRef, private renderer: Renderer2) {

    this.$matCard = this.renderer.createElement('mat-card');

    const matCardInner = this.renderer.createText('Dynamic card!');
    this.renderer.appendChild(this.$matCard, matCardInner);
    const container = this.targetEl.nativeElement;
    this.renderer.appendChild(container, this.$matCard);
}