如何从cdkPortalOutlet的ComponentPortal组件向父组件回传数据

方案一：通过RxJS Subject传递数据（推荐） #

这种方式基于RxJS响应式流，适配复杂或频繁的数据回传场景。

父组件修改 #

1. 创建Subject实例并注入到Portal组件，同时订阅该实例接收回传数据
2. 组件销毁时清理流，避免内存泄漏

import { Subject, takeUntil } from 'rxjs';
import { OnInit, OnDestroy, AfterViewInit } from '@angular/core';
import { CdkPortalOutlet } from '@angular/cdk/portal';

export class ParentComponent implements OnInit, OnDestroy, AfterViewInit {
  defaultComponent!: Portal<any>;
  private destroy$ = new Subject<void>();
  private dataSubject = new Subject<any>(); // 用于接收回传数据的Subject

  @ViewChild(CdkPortalOutlet) portalOutlet!: CdkPortalOutlet;

  ngOnInit(): void {
    // 订阅回传数据
    this.dataSubject.pipe(takeUntil(this.destroy$)).subscribe((returnData) => {
      console.log('收到Portal组件回传的数据:', returnData);
      // 这里写处理回传数据的业务逻辑
    });
    this._loadDefaultComponent();
  }

  ngAfterViewInit(): void {
    // 可选：组件初始化完成后可做额外实例操作
    if (this.portalOutlet.componentInstance) {
      // ...
    }
  }

  ngOnDestroy(): void {
    this.destroy$.next();
    this.destroy$.complete();
    this.dataSubject.complete();
  }

  private _loadDefaultComponent() {
    const _data = this._getPortalComponentData();
    this.defaultComponent = this._getPortalComponent(_data);
  }

  private _getPortalComponentData() {
    return {
      data: this.list,
      dataSubject: this.dataSubject // 将Subject传入Portal组件
    };
  }

  private _getPortalComponent(data: any) {
    return new ComponentPortal(portalComponent, null, this._portalInjector(data));
  }

  private _portalInjector(data: any) {
    return Injector.create({
      providers: [{ provide: PORTAL_DATA, useValue: data }]
    });
  }
}

Portal组件修改 #

注入PORTAL_DATA，通过其中的dataSubject发送回传数据

import { Inject } from '@angular/core';
import { PORTAL_DATA } from './your-portal-token'; // 替换成你的令牌实际路径

export class PortalComponent {
  constructor(@Inject(PORTAL_DATA) private portalData: any) {}

  // 示例：在需要回传数据的时机调用此方法
  sendDataToParent() {
    const returnData = { message: '来自Portal的回传内容', value: 123 };
    this.portalData.dataSubject.next(returnData);
  }
}

方案二：通过回调函数传递数据 #

适合简单的一次性数据回传场景，直接在注入数据中传递回调方法。

父组件修改 #

在传入Portal的数据中添加回调函数

private _getPortalComponentData() {
  return {
    data: this.list,
    onDataReturn: (returnData: any) => {
      console.log('收到回传数据:', returnData);
      // 处理回传数据的逻辑
    }
  };
}

Portal组件修改 #

调用传入的回调函数完成数据回传

import { Inject } from '@angular/core';
import { PORTAL_DATA } from './your-portal-token';

export class PortalComponent {
  constructor(@Inject(PORTAL_DATA) private portalData: any) {}

  sendDataToParent() {
    const returnData = '测试回传内容';
    this.portalData.onDataReturn(returnData);
  }
}

方案三：通过PortalOutlet获取组件实例绑定事件 #

如果Portal组件本身定义了输出事件，可直接通过组件实例监听。

父组件修改 #

通过@ViewChild获取CdkPortalOutlet，监听组件实例的输出事件

import { AfterViewInit } from '@angular/core';
import { CdkPortalOutlet } from '@angular/cdk/portal';
import { PortalComponent } from './portal-component'; // 替换成你的Portal组件路径

export class ParentComponent implements AfterViewInit {
  @ViewChild(CdkPortalOutlet) portalOutlet!: CdkPortalOutlet;

  ngAfterViewInit(): void {
    // 获取Portal组件实例并监听输出事件
    const portalInstance = this.portalOutlet.componentInstance as PortalComponent;
    portalInstance.dataReturn.subscribe((returnData) => {
      console.log('收到回传数据:', returnData);
    });
  }

  // ... 原有其他代码
}

Portal组件修改 #

定义@Output事件发射器

import { Output, EventEmitter } from '@angular/core';

export class PortalComponent {
  @Output() dataReturn = new EventEmitter<any>();

  sendDataToParent() {
    const returnData = { id: 1, name: '测试数据' };
    this.dataReturn.emit(returnData);
  }
}

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