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 и использование там, где ожидающий будет логическим.

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

Какое решение будет более правильным и быстрым для Angular 7?

Answer 1

Не существует "правильного" способа, но у трубы async есть главное преимущество: она автоматически отписывается от Observable, когда компонент уничтожается. Вам не нужно будет хранить подписку в переменной и отписываться в ngOnDestroy() hook.