Angular组件动态增删异常求助：删除选中组件仅移除最后一个

你遇到的删除功能异常，核心原因是动态组件的引用与视图展示的实例不匹配：

在app.component.html中，你使用*ngFor遍历components数组（存储已创建的ComponentRef），同时通过ngComponentOutlet重新创建组件实例。这会导致：

• components数组中保存的是你通过viewContainerRef.createComponent创建的组件引用
• 但视图中实际渲染的是ngComponentOutlet新生成的组件实例
  两者并非同一个对象，因此点击删除时，indexOf无法找到正确的组件引用，最终导致删除逻辑出错，总是移除最后一个组件。

修改代码，直接复用已创建的ComponentRef，避免ngComponentOutlet重复创建实例：

1. 修改app.component.html
   移除ngFor和ngComponentOutlet，只保留用于承载动态组件的容器：

<div class="box-container" #boxContainer></div>

2. 修改app.component.ts

• 在类中添加视图容器的引用：

@ViewChild('boxContainer', { read: ViewContainerRef }) boxContainer!: ViewContainerRef;

• 更新addBox方法，将创建的组件直接插入到容器中：

addBox(user: User) {
  const componentRef = this.boxContainer.createComponent(BoxComponent);
  componentRef.instance.user = user;
  componentRef.instance.delete.subscribe(() => this.deleteComponent(componentRef));
  this.components.push(componentRef);
}

• 保留原有的deleteComponent方法，确保移除数组中的引用并销毁组件：

deleteComponent(component: ComponentRef<BoxComponent>) {
  const index = this.components.indexOf(component);
  if (index !== -1) {
    this.components.splice(index, 1);
    component.destroy();
  }
}

这样修改后，视图中展示的就是components数组中存储的组件实例，点击删除时能准确找到对应的引用，实现正确的删除逻辑。

• 可以在BoxComponent的ngOnDestroy中取消订阅delete事件，避免内存泄漏：

private destroy$ = new Subject<void>();

ngOnDestroy() {
  this.destroy$.next();
  this.destroy$.complete();
}

• 在订阅delete事件时使用takeUntil：

componentRef.instance.delete.pipe(takeUntil(this.destroy$)).subscribe(() => this.deleteComponent(componentRef));

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