Angular动态创建的Component无法在HTML中正常渲染问题求解

问题根源 #

你混淆了Angular两种独立的组件渲染逻辑，二者不能混用：

• 通过ViewContainerRef.createComponent()调用动态创建组件时，Angular已经自动将生成的组件实例插入到了你@ViewChild绑定的#messagecontainer对应DOM节点下，不需要再手动在模板中编写*ngFor渲染代码
• 你在模板中写的*ngFor遍历渲染<app-filter>属于声明式静态渲染，和你代码中动态创建的组件实例没有关联，属于多余的重复逻辑

你看不到渲染效果大概率是两个原因：

1. FilterCollectionComponent.html中没有声明<ng-template #messagecontainer></ng-template>作为动态组件的挂载容器，导致createComponent生成的组件没有地方插入
2. 你同时保留了动态创建逻辑和模板里的*ngFor代码，二者互相冲突

解决方案 #

你可以任选以下两种方案之一修改：

方案一：保留动态创建逻辑，删除冗余模板代码 #

1. 在FilterCollectionComponent.html中添加动态组件挂载容器，删除你之前写的*ngFor遍历代码：

<!-- 仅保留这个容器即可，动态创建的组件会自动挂载到这个位置 -->
<ng-template #messagecontainer></ng-template>

2. （可选优化）Angular 13及以上版本已经废弃了ComponentFactoryResolver，你可以简化动态创建的代码：

// 构造器中删除ComponentFactoryResolver注入
onAddDateRangeFilter() {
  const filter = this.entry.createComponent(FilterComponent);
  filter.instance.filter = FilterType.DateRangeFilter;
  this.filters.push(filter);
}

onAddSensorSelectFilter() {
  const filter = this.entry.createComponent(FilterComponent);
  filter.instance.filter = FilterType.SensorSelectFilter;
  this.filters.push(filter);
}

注意：使用动态创建组件的方案时，需要在FilterCollectionComponent的ngOnDestroy生命周期中遍历filters数组，调用每个组件实例的destroy()方法，避免内存泄漏。

方案二：放弃低层级动态API，改用纯声明式渲染（更简单，适合大多数场景） #

如果你没有特殊的动态组件控制需求，直接用声明式渲染代码更简洁，不易出错：

1. 修改FilterCollectionComponent逻辑：

// 将存储ComponentRef的数组改为存储FilterType枚举
filters: FilterType[] = [];

// 新增方法直接存入枚举值即可，不需要调用动态创建API
onAddDateRangeFilter() {
  this.filters.push(FilterType.DateRangeFilter);
}

onAddSensorSelectFilter() {
  this.filters.push(FilterType.SensorSelectFilter);
}

// 可以删除ComponentFactoryResolver注入、@ViewChild绑定的entry声明

2. 模板中保留你之前写的*ngFor代码即可正常运行：

<div *ngFor="let filter of filters">
    <app-filter [filter]="filter"></app-filter>
</div>

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