在订阅者到 RxJS 可观察完成后执行 function

Question

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

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

例子：

我正在开发一个 UI 小部件库（比如 angular 材料已经提供的那些扩展）。 这些小部件之一必须完成以下任务：

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

假设使用Observable来实现上述目标，我希望能够执行类似的操作（如果可以帮助提供解决方案，我在 Angular 10 项目中使用 typescript）：

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');

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

1. 该事件以'DATA'作为有效负载发出，
2. 显示按钮内的微调器，
3. 'First consumer'在控制台中登录，
4. 'Second consumer'登录控制台，
5. 按钮内的微调器被移除。

---

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

Answer 1

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

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

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

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

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

...

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

    // Perform some logic

    this.loading.next(false);
}