Angular CDK ComponentPortal：如何从视图中移除组件

一、程序化移除Overlay中的ComponentPortal组件 #

你的代码无法正确销毁组件，核心原因是没使用Angular CDK Overlay官方推荐的完整清理方式。正确做法是调用OverlayRef的dispose()方法，它会一次性完成所有清理工作：

• 分离已附加的ComponentPortal
• 销毁Overlay对应的DOM容器
• 自动触发组件的销毁生命周期，无需手动调用componentRef.destroy()

修复后的销毁方法 #

修改父组件中的destroyRef()方法：

destroyRef() {
  // 先判断OverlayRef是否存在且未被销毁
  if (this.overlayRef && !this.overlayRef.hasDisposed()) {
    // 调用dispose()完成全量清理
    this.overlayRef.dispose();
    // 清理组件引用，避免内存泄漏
    this.overlayRef = null;
    this.componentRef = null;
    console.log('Overlay及组件已销毁');
  }
}

原代码无效的原因 #

• overlayRef.detach()仅将组件从Overlay中分离，但Overlay的DOM容器仍会保留在页面中；
• 单独调用componentRef.destroy()会销毁组件，但Overlay的空容器未被清理，视觉上可能误以为组件还存在；
• dispose()是Overlay提供的完整清理API，能彻底移除Overlay及其内部组件。

二、组件被实例化两次的问题 #

你在Stackblitz中看到的两次实例化，是因为示例项目基于Angular Material官方的CDK示例模板——该模板本身已经在页面默认渲染了一次<component-portal-example>组件，而你的代码又通过Overlay创建了另一个实例，因此出现两次渲染。

本地项目无此问题，是因为你的本地模板中没有额外添加<component-portal-example>标签，仅通过Overlay创建了唯一实例。

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