如何在ngOnInit()中动态创建组件？解决clear未定义报错

这个错误的核心原因是你在ngOnInit生命周期钩子中尝试访问ViewChild获取的container，但此时视图还未完成初始化，container还处于undefined状态。Angular中ViewChild的赋值是在ngAfterViewInit钩子之后才完成的，早于这个时机调用都会导致获取不到容器引用。

下面是具体的修复方案：

1. 调整方法调用时机到ngAfterViewInit #

把this.selectTabStatus(this.selectedStatus)从ngOnInit移到ngAfterViewInit中，确保视图初始化完成后再去创建组件：

ngOnInit() {
  this.spinner.show();
  setTimeout(() => {
    this.spinner.hide();
    this.renderReady = true;
  }, 2000);
  // 移除这里的调用
}

ngAfterViewInit() {
  // 视图初始化完成后再调用组件创建逻辑
  this.selectTabStatus(this.selectedStatus);
}

2. 增加空值判断提升代码健壮性 #

为了避免其他场景下出现类似的空引用错误，建议在操作container和componentRef时增加空值检查：

• 在createComponent中先确认container存在：

createComponent(status) {
  if (!this.container) return; // 增加空值判断
  this.container.clear();
  const factory: ComponentFactory<any> = this.resolver.resolveComponentFactory(CardDatagridComponent)
  this.componentRef = this.container.createComponent(factory);
  this.componentRef.instance.cardStatus = status;
}

• 在ngOnDestroy中先检查componentRef是否存在：

ngOnDestroy() {
  if (this.componentRef) { // 增加空值判断
    this.componentRef.destroy();
  }
}

完整修改后的代码 #

import { Component, OnInit, ViewChild, ViewContainerRef, ComponentFactoryResolver, ComponentRef, ComponentFactory, AfterViewInit } 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, AfterViewInit { 
  @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); 
  }

  ngAfterViewInit() {
    this.selectTabStatus(this.selectedStatus);
  }

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

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

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

这样修改后，就能确保在视图完全初始化后再去操作容器引用，从根源上解决clear方法调用时的空引用错误。

内容的提问来源于stack exchange，提问作者Juan