如何将BehaviorSubject传递给MatDialog的data参数实现动态数据同步？

解决方案 #

首先可以明确：BehaviorSubject完全可以直接通过MatDialog的data参数传递，MatDialog传递data时是传递对象引用，不会对RxJS流做深拷贝，你遇到的流不生效问题不是传递导致的，大概率是新增托盘后没有触发父组件WarehouseStackComponent的@Input() pallets更新，所以pallets$没有发射新值。

具体排查和修复步骤

• 首先确认你在CreatePalletComponent里创建完托盘后，是否调用了接口拉取最新的托盘列表，并且更新了父组件WarehouseStackComponent的pallets输入值，只有pallets输入值变更，才会触发setter给pallets$推送新值，对话框里的async管道才能拿到最新数据。
• 如果不想依赖父组件输入更新，也可以直接在创建托盘成功后，调用data.pallets$.next()手动推送最新的托盘列表，你可以在StackPalletsComponent里订阅创建托盘的关闭事件，拿到新托盘后更新流：

// 修改stack-pallets-component.ts的showCreationModal方法
showCreationModal() {
  const createDialogRef = this.dialog.open(CreatePalletComponent, {
    data: {
      isStackPallet: true,
      warehouseStackID: this.data.warehouseStackID
    }
  });
  // 监听创建弹窗关闭，拿到新的托盘数据
  createDialogRef.afterClosed().subscribe((newPallet: Pallet) => {
    if (newPallet) {
      // 拿到当前流里的旧值，拼接新托盘后推送新序列
      const currentPallets = this.data.pallets$.value;
      this.data.pallets$.next([...currentPallets, newPallet]);
    }
  });
}

• 如果担心后续维护性，还有两种可选方案：
  1. 直接把MainServiceService里的托盘查询流封装成公共可观察对象，对话框里直接订阅服务里的流，不需要通过dialog data传递
  2. 对话框关闭时把变更数据返回给父组件，由父组件统一更新pallets$：

  // 修改父组件warehouse-stack-component.ts的openDialog方法，新增关闭监听
  openDialog() {
    this.dialogRef = this.dialog.open(StackPalletsComponent, {
      data: {
        warehouseStackID: this.warehouseStackID,
        pallets: this.pallets$.value // 仅传递当前快照值即可，无需传递流
      } 
    });
    this.dialogRef.afterClosed().subscribe((updatedPallets) => {
      if (updatedPallets) {
        this.pallets$.next(updatedPallets);
      }
    });
  }
  

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