Angular应用中如何避免添加重复的动态组件？

嗨，我来帮你搞定这个问题！你当前的代码每次点击「Add component」按钮都会创建一个新的DataComponent实例，所以才会出现重复添加的情况。这里有几个简单实用的解决办法：

方法一：检查容器内是否已有组件实例 #

ViewContainerRef自带一个length属性，能直接获取容器内已加载的组件数量。我们可以利用这个属性做判断，只有当容器为空时才创建组件：

修改你的home.component.ts里的addComp方法：

addComp(){
  // 当容器中没有组件时才创建新实例
  if(this.ele.length === 0){
    this.ele.createComponent(DataComponent);
  }
}

方法二：用状态变量跟踪组件是否已添加 #

如果需要更灵活的控制（比如后续要支持移除组件后重新添加），可以在组件内定义一个布尔变量来记录组件的添加状态：

第一步，在HomeComponent类中添加状态变量并修改addComp方法：

import { Component, inject, OnInit,ViewChild,ViewContainerRef } from '@angular/core';
import { DataComponent } from '../data/data.component';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css'],
  standalone: true,
})
export class HomeComponent implements OnInit{
  @ViewChild('myDiv', {static:false, read: ViewContainerRef}) ele!: ViewContainerRef;
  // 新增状态变量，标记组件是否已添加
  private isComponentAdded = false;

  ngOnInit(){ }

  addComp(){
    if(!this.isComponentAdded){
      this.ele.createComponent(DataComponent);
      this.isComponentAdded = true;
    }
  }
}

如果需要支持移除组件，还可以再添加一个移除方法和按钮：
在home.component.html中添加移除按钮：

<p>And I'm Lucas Simões</p>
<button type="button" (click)="addComp()">Add component</button>
<button type="button" (click)="removeComp()">Remove component</button>
<div #myDiv></div>

然后在home.component.ts中添加移除方法：

removeComp(){
  // 清空容器内的所有组件
  this.ele.clear();
  // 重置状态变量，允许再次添加
  this.isComponentAdded = false;
}

这样就能完美避免重复添加，还能灵活控制组件的添加和移除啦～

内容来源于stack exchange