Angular中实现非宿主组件程序化渲染/销毁独立Tooltip组件时，如何避免销毁宿主容器元素

我完全理解你的困扰——之前做项目时也踩过Angular动态组件渲染的这个坑，默认的createComponent行为确实会在销毁组件时连宿主元素一起干掉，完全不符合我们只想保留容器的需求。下面给你两个实用的解决方案，都是我实际验证过的：

方案一：用共享服务传递ViewContainerRef（推荐） #

核心思路是让Dashboard组件托管Tooltip的容器，通过共享服务把容器的ViewContainerRef传递给Calendar组件，Calendar组件利用这个引用动态创建/销毁Tooltip，这样销毁时只会移除Tooltip组件本身，不会碰宿主容器。

步骤1：创建共享服务 #

先写一个简单的服务，用来传递容器引用：

import { Injectable, ViewContainerRef } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class TooltipHostService {
  private hostRef: ViewContainerRef | null = null;

  setHostRef(ref: ViewContainerRef): void {
    this.hostRef = ref;
  }

  getHostRef(): ViewContainerRef | null {
    return this.hostRef;
  }
}

步骤2：在Dashboard组件中绑定容器引用 #

修改Dashboard的模板，给宿主容器加模板引用标记：

<app-dashboard>
  <app-wrapper>
    <app-section>
      <app-calendar>I programmatically add a tooltip to my distant ancestor on hover</app-calendar>
    </app-section>
  </app-wrapper>
  <!-- 给容器加模板引用 #tooltipHost -->
  <div #tooltipHost class="event-tooltip-host"></div>
</app-dashboard>

然后在Dashboard组件类中获取这个引用并传给服务：

import { AfterViewInit, Component, ViewChild, ViewContainerRef } from '@angular/core';
import { TooltipHostService } from './tooltip-host.service';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html'
})
export class DashboardComponent implements AfterViewInit {
  @ViewChild('tooltipHost', { read: ViewContainerRef }) tooltipHostRef!: ViewContainerRef;

  constructor(private tooltipHostService: TooltipHostService) {}

  ngAfterViewInit(): void {
    // 把容器的ViewContainerRef传给服务
    this.tooltipHostService.setHostRef(this.tooltipHostRef);
  }
}

步骤3：在Calendar组件中动态操作Tooltip #

现在Calendar可以通过服务拿到容器引用，用ViewContainerRef.createComponent来创建组件，销毁时只会移除Tooltip：

import { Component, ComponentRef } from '@angular/core';
import { TooltipComponent } from './tooltip.component';
import { TooltipHostService } from './tooltip-host.service';

@Component({
  selector: 'app-calendar',
  templateUrl: './calendar.component.html'
})
export class CalendarComponent {
  private tooltipRef: ComponentRef<TooltipComponent> | null = null;

  constructor(private tooltipHostService: TooltipHostService) {}

  eventMouseEnter({ event, el }): void {
    const hostRef = this.tooltipHostService.getHostRef();
    if (!hostRef) return;

    // 创建Tooltip组件并挂载到容器中
    this.tooltipRef = hostRef.createComponent(TooltipComponent);
    // 传递输入参数
    this.tooltipRef.setInput('event', event);
    this.tooltipRef.setInput('element', el);
    // 触发变更检测
    this.tooltipRef.changeDetectorRef.detectChanges();
  }

  eventMouseLeave(): void {
    if (this.tooltipRef) {
      // 销毁组件，只会移除Tooltip的DOM，容器保留
      this.tooltipRef.destroy();
      this.tooltipRef = null;
    }
  }

  // 组件销毁时清理Tooltip，防止内存泄漏
  ngOnDestroy(): void {
    this.eventMouseLeave();
  }
}

方案二：手动管理组件的DOM挂载（临时快速解决） #

如果你不想新增共享服务，可以换一种方式：不要用createComponent的hostElement选项，而是先创建组件，再手动把组件的DOM节点插入到宿主容器中。这样销毁时只移除组件节点，容器不受影响：

eventMouseEnter({ event, el }) {
  const tooltipHost = document.querySelector('.event-tooltip-host')!;
  this.tooltipInstance = createComponent(TooltipComponent, {
    environmentInjector: this.injector,
    bindings: [
      inputBinding('event', () => event),
      inputBinding('element', () => el)
    ]
  });
  this.appRef.attachView(this.tooltipInstance.hostView);
  // 手动把组件的DOM插入到宿主容器
  tooltipHost.appendChild(this.tooltipInstance.hostView.rootNodes[0]);
  this.tooltipInstance.changeDetectorRef.detectChanges();
}

eventMouseLeave() {
  if (this.tooltipInstance) {
    // 先移除组件DOM节点
    this.tooltipInstance.hostView.rootNodes[0].remove();
    this.appRef.detachView(this.tooltipInstance.hostView);
    this.tooltipInstance.destroy();
    this.tooltipInstance = null;
  }
}

这个方法虽然能解决问题，但手动操作DOM不符合Angular的最佳实践，容易引发变更检测或内存泄漏问题，所以更推荐第一种方案。

为什么之前的方法会销毁宿主容器？ #

当你使用createComponent的hostElement选项时，Angular会把这个元素作为组件的宿主元素（相当于组件的根元素），而不是组件的容器。所以当你调用destroy()时，Angular会连同这个宿主元素一起移除，这就是你的.event-tooltip-host被删掉的原因。而用ViewContainerRef.createComponent时，组件是作为容器的子视图存在的，销毁组件只会清理组件自身的DOM，容器会被保留。

内容来源于stack exchange