Angular - 数据加载器 - 异步绑定或正常

Question

我想在 Angular 7 应用程序中添加一个通用加载器（微调器或类似的东西）。当我转到特定路线（页面）时，首先我从服务器获取数据。在请求期间，加载程序应该是可见的。

第一个简单的解决方案是这样的服务：

class PendingService {
    active = 0;
    isActive = false;

    start() {
        this.active++;
        this.isActive = true;
    }

    stop() {
        this.active--;

        if (this.active === 0) {
            this.isActive = false;
        }
    }
}

并像这样使用它：

pendingService.start();
data.get().subscribe(null, null, () => pendingService.stop());

带绑定：

<spinner [hidden]="!pendingService.isActive"></spinner>

其次是使用 rjxs 并使用 where pending 将是可观察的布尔值。

<spinner [hidden]="pendingService.pending | async"></spinner>

对于 Angular 7，哪种解决方案更合适、更快捷？

Answer 1

没有“正确”的方式，但async 管道的主要优点是它会在组件被销毁时自动取消订阅Observable。您无需将订阅存储到变量中并在 ngOnDestroy() 挂钩中取消订阅。