Angular 12升级至16后动态组件删除时VCR索引获取失败问题

问题根源 #

Angular 16对ViewContainerRef.indexOf()的参数类型校验更严格了。在Angular 12里，传ComponentRef实例能被隐式识别，但到了16版本，这个方法要求必须传入**ViewRef类型**的实例——而ComponentRef本身并不是ViewRef，它的hostView属性才是对应视图的ViewRef实例，这就是之前调用indexOf始终返回-1的原因。

不修改创建方式的解决方案 #

直接修改删除逻辑里indexOf的参数，把componentRef换成componentRef.hostView，就能正确拿到组件在视图容器中的索引，顺利完成删除操作。

修改前后代码对比 #

原来的无效删除逻辑：

deleteComponent(componentRef: ComponentRef<DynamicComponent>) {
  const index = this.vcr.indexOf(componentRef as any);
  if (index !== -1) {
    this.vcr.remove(index);
  }
}

修改后的有效代码：

deleteComponent(componentRef: ComponentRef<DynamicComponent>) {
  const index = this.vcr.indexOf(componentRef.hostView);
  if (index !== -1) {
    this.vcr.remove(index);
  }
}

补充说明 #

这个方案完全不需要改动你原来的动态组件创建逻辑，只需要调整删除方法里的一行代码，就能适配Angular 16的类型要求。如果后续还有版本变动，也可以考虑在创建组件时直接存储索引，但当前场景下上述方案是最贴合你需求的。

内容的提问来源于stack exchange，提问作者Alejandro Diaz Bellido