Angular - 当RxJs订阅处于活动状态时显示隐藏的微调器

Question

我想实现一个指令，在容器元素的顶部显示一个微调器。 例如考虑以下场景

<component [spinner]="{subs: [usersSub, accountsSub], latency: 500}"></component>

这里[spinner]是接收对象作为param的指令，其中包含：

1. subs ： RxJS订阅的数组，用于在加载任何订阅时显示微调器。
2. 延迟时间：如果请求超过此时间，则以毫秒为单位显示微调器的时间。

我知道如何在组件dom之上展示一个微调器。我需要帮助监控订阅。

Answer 1

如何监控订阅

您在评论中引用的库 angular-2-busy ，通过将订阅添加到数组并使用订阅的add()方法来监视订阅添加一个拆解方法，该方法在订阅取消订阅时调用。

请参阅RxJs 5.5.2 source，Subscription.ts

add(teardown: TeardownLogic): Subscription {
  ...

拆除功能会从监视器阵列中删除订阅，因此当此阵列为空时，微调器将停止。

我想知道您不喜欢或将在自己的指令中改进的 angular-2-busy 是什么？

订阅何时取消订阅

在这个问题上，订阅者的源具有这些内部函数，因此订阅取消订阅完整或错误事件（当然，当明确调用取消订阅时）。

Subscriber.prototype._complete = function () {
    this.destination.complete();
    this.unsubscribe();
};

Subscriber.prototype._error = function (err) {
    this.destination.error(err);
    this.unsubscribe();
};

未完成或错误的订阅将使微调器旋转。