在 RxJS observable 的订阅者完成后执行函数答案

【问题标题】：Execute function after subscribers to an RxJS observable complete在 RxJS observable 的订阅者完成后执行函数
【发布时间】：2020-07-20 10:48:20
【问题描述】：

在 RxJS 中，我需要在执行给定 observable 的所有订阅后执行一些代码。我需要在每个触发的next 通知以及所有订阅者功能完成之后执行此操作（不仅仅是在可观察对象完成时执行一次）。

换句话说，我需要一个像tap() 这样的运算符，它在所有订阅者都被执行后运行。有什么办法吗？

示例：

我正在开发一个 UI 小部件库（比如对 angular material 已经提供的那些的某种扩展）。其中一个小部件必须完成以下任务：

提供一个按钮，
单击按钮时，在按钮内显示一个微调器，
将控制权交给谁在使用小部件来完成某些工作（例如，在数据库中写入），
工作完成后，将微调器隐藏在按钮内。

假设使用Observable 来实现上述目的，我希望能够做类似的事情（如果它可以帮助提供解决方案，我在 Angular 10 项目中使用打字稿）：

const eventEmitter = new EventEmitter<any>();

const observable = eventEmitter.asObservable().pipe(
  tap(() => ...show the spinner...), // OK, no problem
  someOperator(() => ...hide the spinner when all subscriber functions complete...) // Which operator can I use?
);

observable.subscribe(() => console.log('First consumer'));
observable.subscribe(() => console.log('Second consumer'));

eventEmitter.emit('DATA');

单击按钮时所需的事件顺序是：

事件以'DATA' 作为有效负载发出，
显示按钮内的微调器，
'First consumer' 登录控制台，
'Second consumer' 登录控制台，
按钮内的微调器被移除。

奖励问题：如何在每个订阅者执行后运行一些代码？

【问题讨论】：

“订阅者功能已完成”是什么意思？这是在每个next 通知之后还是在complete 通知之后？
每次next 通知之后
请围绕这个问题生成一些最小的代码示例？
您可以在每个next 通知之后使用tap 运算符，但不是在Observable 完成之后。也许finalize 运算符是您要找的？

标签： angular rxjs rxjs-observables rxjs-pipeable-operators

【解决方案1】：

如果我理解正确，这个功能应该被包装在一个单独的组件中或作为一个指令。您需要在模板中收听以显示和隐藏微调器的“可观察”是由 BehaviorSubject 控制的加载状态。所以按钮的模板应该是这样的：

<button (click)="buttonClicked()">New UI Element <span *ngIf="loading | async">Spinner</span></button>

您可以在模板中使用事件绑定来触发负责按钮点击逻辑的函数。

使用 BehaviorSubject 的组件逻辑应该如下所示。

loading: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);

...

buttonClicked() {
    this.loading.next(true);

    // Perform some logic

    this.loading.next(false);
}

【讨论】：