Angular CDK Portal：已弃用ComponentFactoryResolver的替代方案

1. 替代ComponentFactoryResolver的CDK Portal方案 #

Angular 14+已弃用ComponentFactoryResolver，但CDK Portal的DomPortalOutlet早已适配新API，你无需手动传入该参数。

原来的写法可能是：

const outlet = new DomPortalOutlet(document.body, componentFactoryResolver, injector, appRef);
const portal = new ComponentPortal(ModalComponent);
outlet.attach(portal);

直接移除componentFactoryResolver参数即可正常使用：

const outlet = new DomPortalOutlet(document.body, injector, appRef);
const portal = new ComponentPortal(ModalComponent);
outlet.attach(portal);

DomPortalOutlet内部会通过注入器自动获取组件创建所需的依赖，新版本CDK已处理好兼容逻辑，不用再手动传递Resolver。

2. ViewContainerRef.createComponent渲染到body的原因 #

这完全由你创建组件时指定的宿主元素决定：

• 如果你的ViewContainerRef是从document.body对应的上下文获取的，组件自然会挂载到body下
• 如果调用createComponent时显式设置了hostElement: document.body，组件也会直接渲染到body中

举个典型例子：

const vcr = injector.get(ViewContainerRef);
const componentRef = vcr.createComponent(ModalComponent, {
  hostElement: document.body
});

如果你的ViewContainerRef来自组件内部但结果渲染到body，大概率是创建组件时未指定正确的宿主容器，或者该组件的父视图本身就被挂载到body了。

3. 无需CDK Portal，直接在任意DOM位置注入组件 #

当然可以，不依赖CDK Portal也能实现，核心是用Angular原生的createComponent（Angular 14+推荐）和ApplicationRef管理组件生命周期：

示例：实现一个弹窗服务 #

import { Injectable, Injector, ApplicationRef, createComponent } from '@angular/core';
import { ModalComponent } from './modal.component';

@Injectable({ providedIn: 'root' })
export class ModalService {
  constructor(
    private injector: Injector,
    private appRef: ApplicationRef
  ) {}

  openModal(): void {
    // 1. 指定目标DOM位置（可替换为任意元素，比如某个特定div）
    const targetElement = document.body;

    // 2. 创建组件实例，指定宿主元素和注入器
    const componentRef = createComponent(ModalComponent, {
      injector: this.injector,
      hostElement: targetElement
    });

    // 3. 将组件加入应用变更检测树，否则视图不会响应数据变化
    this.appRef.attachView(componentRef.hostView);

    // 4. 组件销毁时清理资源，避免内存泄漏
    componentRef.onDestroy(() => {
      this.appRef.detachView(componentRef.hostView);
    });
  }
}

关键注意事项 #

• 动态创建的组件必须通过ApplicationRef.attachView加入变更检测，否则组件不会更新视图
• 组件销毁时务必调用detachView，防止内存泄漏
• 若需传递输入/监听输出，直接操作componentRef.instance即可，比如componentRef.instance.title = '弹窗标题'

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