如何在Angular中链式订阅MatBottomSheet的Observable？

你遇到的问题其实很典型——当你尝试把两个订阅链式写在一起时，第一个subscribe()返回的是Subscription对象，而不是你需要的MatBottomSheetRef，所以自然没法在后面调用afterDismissed()方法（因为Subscription根本没有这个方法）。

那怎么实现类似链式的优雅写法呢？这里有两种实用的方案：

方案1：保留BottomSheetRef引用，简洁处理双订阅 #

这种方式既保留了代码的可读性，又能实现你想要的“链式”逻辑感：

changeBranch() {
  // 先获取BottomSheetRef，这是链式调用的基础
  const bottomSheetRef = this.bottomSheet.open(CCSBranchComponent, { data: this.branches });

  // 利用Subscription.add()返回自身的特性，实现连续链式添加订阅
  this.subscription
    .add(bottomSheetRef.instance.change.subscribe((branch: Branch) => {
      this.branchInfo = `Description : ${branch.author}\nAuthor : ${branch.id}\nCreated date :${branch.created}`;
      this.blockpointBranchForm.get('branch').setValue(branch.id);
    }))
    .add(bottomSheetRef.afterDismissed().subscribe(() => {
      this.returnSelectedBranch.emit(this.blockpointBranchForm.get('branch').value);
    }));
}

这里的关键是Subscription.add()方法会返回自身，所以可以连续调用.add()，既实现了类似链式的写法，又能正确访问到bottomSheetRef上的两个Observable。

方案2：用RxJS操作符整合逻辑（更函数式的写法） #

如果你想把逻辑完全整合到RxJS的流中，可以用defer()来包裹弹窗的创建，同时自动管理订阅生命周期：

import { defer, fromEventPattern } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

changeBranch() {
  this.subscription.add(
    defer(() => {
      const bottomSheetRef = this.bottomSheet.open(CCSBranchComponent, { data: this.branches });
      
      // 将组件内部的change事件转换为Observable，并用takeUntil保证弹窗关闭时自动取消订阅
      const change$ = fromEventPattern(handler => bottomSheetRef.instance.change.subscribe(handler));
      change$.pipe(
        takeUntil(bottomSheetRef.afterDismissed())
      ).subscribe((branch: Branch) => {
        this.branchInfo = `Description : ${branch.author}\nAuthor : ${branch.id}\nCreated date :${branch.created}`;
        this.blockpointBranchForm.get('branch').setValue(branch.id);
      });

      // 返回弹窗关闭的Observable，用于最终的emit操作
      return bottomSheetRef.afterDismissed();
    }).subscribe(() => {
      this.returnSelectedBranch.emit(this.blockpointBranchForm.get('branch').value);
    })
  );
}

defer()的作用是延迟弹窗的创建，确保只有当Observable被订阅时才打开弹窗；takeUntil()则能自动在弹窗关闭时取消change事件的订阅，避免内存泄漏。

为什么你的原写法会报错？ #

再梳理下核心原因：当你调用this.bottomSheet.open(...).instance.change.subscribe(...)时，最后返回的是Subscription对象（订阅操作的返回值），而不是MatBottomSheetRef。而Subscription没有afterDismissed()方法，所以自然会抛出undefined错误。你需要始终持有MatBottomSheetRef的引用，才能访问它的所有Observable。

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