Angular 9调用动态组件后页面空白问题咨询

看起来你遇到的核心问题是动态组件的容器引用不正确，导致组件虽然被创建了，但没有渲染到页面上。控制台能拿到数据说明数据请求逻辑是正常的，只是组件的DOM没有被正确插入到页面中。下面是具体的排查点和解决步骤：

1. 修正ViewContainerRef的引用方式 #

你当前直接注入了ViewContainerRef到LineChartComponent中，但这会指向组件自身的根容器，如果你的组件模板里没有预留对应的占位位置，动态创建的组件就没有地方挂载。正确的做法是在模板里指定一个明确的容器：

步骤1：在LineChartComponent的模板中添加占位符 #

<!-- LineChartComponent的模板 -->
<div>
  <!-- 保留原有提交按钮 -->
  <button (click)="OnSubmit()">加载动态组件</button>
  <!-- 新增动态组件的容器占位符 -->
  <ng-template #dynamicContainer></ng-template>
</div>

步骤2：通过@ViewChild获取容器的ViewContainerRef #

修改LineChartComponent的代码，替换原有的注入方式：

import { Component, OnInit, ViewContainerRef, ComponentFactoryResolver, ViewChild } from '@angular/core';
import { DrawLinechartComponent } from './draw-linechart.component';

export class LineChartComponent implements OnInit{
  // 通过@ViewChild获取模板中定义的容器
  @ViewChild('dynamicContainer', { read: ViewContainerRef }) vf!: ViewContainerRef;

  constructor(private componentFactoryResolver:ComponentFactoryResolver){}

  ngOnInit() {}

  OnSubmit(){ 
    this.createComponent();
  }

  createComponent(){
    // 可选：清空容器，避免重复创建多个动态组件
    this.vf.clear();
    const resolver = this.componentFactoryResolver.resolveComponentFactory(DrawLinechartComponent);
    this.vf.createComponent(resolver);
  }
}

2. 修正动态组件中的方法名大小写问题 #

你的动态组件模板里的按钮点击事件是(click)="prepareData()"，但组件类里的方法是PrepareData()（首字母大写），这会导致点击按钮时触发控制台错误。需要统一方法名：

修改DrawLinechartComponent的代码：

export class DrawLinechartComponent implements OnInit {
  constructor(private productservice: ProductService) {}
  
  ngOnInit() { 
    this.prepareData(); // 同步修改这里的调用
  }

  // 改成小驼峰命名，和模板中的调用一致
  prepareData() {
    this.productservice.getProductsData(this.productHistoric).subscribe((data) => {
      this.historicproducts = data;
      console.log("historic products", this.historicproducts)
    });
  }
}

3. 关于Angular 9的entryComponents（可选优化） #

从Angular 8开始，框架已经可以自动检测动态组件，不需要再手动添加到entryComponents数组中了。你可以尝试移除module.ts中的entryComponents:[DrawLinechartComponent]，这不会影响功能，还能简化配置。

完成以上步骤后，动态组件应该就能正常渲染到页面上了，点击按钮也能正确触发数据加载逻辑。

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