Angular CDK：如何通过DomPortalHost向组件传递值？附服务代码

嘿，我来帮你搞定Angular CDK里用DomPortalHost给组件传值的事儿！针对你的PService场景，有两种常用且靠谱的方法，我给你一步步讲清楚：

方法一：通过自定义Injector注入数据（推荐，符合Angular DI理念） #

这种方法适合需要在组件初始化阶段就拿到数据的场景，利用Angular的依赖注入系统来传递值：

步骤1：定义一个注入Token #

首先在共享文件里创建一个InjectionToken，用来标记我们要传递的数据：

import { InjectionToken } from '@angular/core';

// 可以根据实际需求定义具体类型，这里用any做示例
export const P_COMPONENT_DATA = new InjectionToken<any>('PComponentData');

步骤2：在PService中创建带自定义Injector的ComponentPortal #

修改你的PService，创建ComponentPortal时传入扩展后的Injector，把要传递的数据作为provider加入：

@Injectable() 
export class PService { 
  private loadPComponent: ComponentPortal<PComponent>; 
  private bodyPortalHost: DomPortalHost; 

  constructor(
    private appRef: ApplicationRef, 
    private componentFactoryResolver: ComponentFactoryResolver, 
    private injector: Injector
  ) {}

  // 新增参数接收要传递给组件的数据
  instance(elementRef: Element, componentData: any) { 
    // 创建自定义Injector，继承原有injector并添加我们的data provider
    const customInjector = Injector.create({
      parent: this.injector,
      providers: [
        { provide: P_COMPONENT_DATA, useValue: componentData }
      ]
    });

    // 用自定义injector重新创建ComponentPortal
    this.loadPComponent = new ComponentPortal(PComponent, null, customInjector);
    
    this.bodyPortalHost = new DomPortalHost(elementRef, this.componentFactoryResolver, this.appRef, this.injector);
    // 挂载portal到目标元素
    this.bodyPortalHost.attach(this.loadPComponent);
  }
}

步骤3：在PComponent中注入数据 #

在目标组件PComponent里，用@Inject装饰器获取我们传递的数据：

import { Component, Inject } from '@angular/core';
import { P_COMPONENT_DATA } from './path-to-your-token-file';

@Component({
  selector: 'app-p',
  template: '<div>Received message: {{ componentData.message }}</div>'
})
export class PComponent {
  constructor(
    @Inject(P_COMPONENT_DATA) public componentData: { message: string; id?: number }
  ) {
    // 组件初始化时就能拿到数据
    console.log('Data from PService:', this.componentData);
  }
}

方法二：直接获取组件实例赋值（更灵活） #

如果你不需要在组件初始化时就拿到数据，或者需要动态更新数据，这种方法更直接：

步骤1：修改PService的instance方法 #

挂载Portal后，attach方法会返回组件实例，直接给实例的属性赋值即可：

@Injectable() 
export class PService { 
  private loadPComponent: ComponentPortal<PComponent>; 
  private bodyPortalHost: DomPortalHost; 

  constructor(
    private appRef: ApplicationRef, 
    private componentFactoryResolver: ComponentFactoryResolver, 
    private injector: Injector
  ) {
    this.loadPComponent = new ComponentPortal(PComponent);
  }

  instance(elementRef: Element, componentData: any) { 
    this.bodyPortalHost = new DomPortalHost(elementRef, this.componentFactoryResolver, this.appRef, this.injector);
    // 挂载portal并获取组件实例
    const pComponentInstance = this.bodyPortalHost.attach(this.loadPComponent) as PComponent;
    // 直接给组件的public属性赋值
    pComponentInstance.data = componentData;
  }
}

步骤2：在PComponent中定义接收属性 #

在PComponent里声明一个public属性来接收数据，建议在ngOnInit里使用（因为constructor执行时可能还没完成赋值）：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-p',
  template: '<div>Received ID: {{ data.id }}</div>'
})
export class PComponent implements OnInit {
  public data: any;

  ngOnInit() {
    console.log('Data from PService:', this.data);
  }
}

小提示 #

• 如果需要动态更新数据，方法二可以直接修改pComponentInstance.data，但如果组件没有自动检测变化，可能需要调用ChangeDetectorRef.markForCheck()触发变更检测。
• 方法一更适合初始化时的静态数据，方法二更适合后续动态调整的数据。

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