механизм автоматической отписки от наблюдаемых

Question

Чтобы попытаться СУХОЙ мой код, чтобы убедиться, что я отписался от наблюдаемых подписок, я создал этот класс:

// autounsubscribe.ts 

import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

export abstract class AutoUnsubscribe {
    protected unsubscriber$ = new Subject<void>();

    ngOnDestroy(): void {
        this.unsubscriber$.next();
        this.unsubscriber$.complete();
        console.log('unsubscribed');
    }

    protected subscribe(observable, fn) {
        return observable.pipe(takeUntil(this.unsubscriber$)).subscribe(fn);
    }
}

теперь он может быть расширен другими классами, такими как:

import { Component } from '@angular/core';
import { Observable } from 'rxjs';
import { AutoUnsubscribe } from './autounsubscribe';

@Component({
    selector: 'nio-init',
    templateUrl: './init.component.html',
    styleUrls: ['./init.component.scss']
})
export class InitComponent extends AutoUnsubscribe {
    private obs$: Observable<boolean> = new Observable();

    constructor() {
        super();

        this.subscribe(this.obs$, data => {
            console.log('new event', data);
        });
    }
}

Это работает: подписка получает данные, когда наблюдаемые изменения и когда этот компонент уничтожается, консоль регистрирует «неподписанный»

Однако, поскольку я относительный нубский кодировщик машинописного текста,Мне было интересно, если

А) это самый подходящий способ, так как я начинаю разлюбить «расширяет / наследует», поскольку это имеет тенденцию скрывать вещи.Например, "откуда взялась эта подписка? Проверяет ... о да, я должен быть в классе, который я расширяю" и т. Д.

B) У меня есть зуд, чтобы обеспечить ту же функциональность через декораторы, но неполностью уверен, что

C) как другие люди могут управлять этим процессом.Я видел несколько вариантов, но большинство из них связано с большим количеством проблем с СУХОЙ

Буду признателен за ваши мысли, комментарии и предложения;)

Answer 1

Существует библиотека под названием subsink , созданная Warbell для изящной отписки от нескольких подписок в компоненте.Он не будет автоматически подписываться на ваши подписки, но вы можете добавить несколько наблюдаемых в массив для отмены подписки вместе

Вы можете увидеть небольшое введение об этом плагине от John Papa в ng-conf 2019

Answer 2

Ваша идея умна, но я думаю, что вам лучше использовать привязку наблюдаемых к вашему шаблону с помощью трубы async.

export class InitComponent {
    user$: Observable<UserModel>;

    constructor(userService: UserService) {
        this.user$ = userService.fetchUserData();
    }
}

Тогда вы можете легко работать со своим наблюдаемым свойствомв шаблоне, например, так:

<div *ngIf="user$ | async as user">
  <h3>{{ user.name }}</h3>
  <p>{{ user.bio }}</p>
</div>

С помощью асинхронного канала вам не нужно беспокоиться об отмене подписки.

Если вам нужны более настраиваемые, производные свойства, вы все еще можете использовать канал async.

export class InitComponent {
    user$: Observable<UserModel>;

    get isUserQualified$(): Observable<boolean> {
        return this.user$.pipe(map(u => u.age > 21 && u.weight >= 100));
    }

    constructor(userService: UserService) {
        this.user$ = userService.fetchUserData();
    }
}

<div *ngIf="user$ | async as user">
  <h3>{{ user.name }}</h3>
  <p>{{ user.bio }}</p>
</div>
<div *ngIf="isUserQualified$ | async">
  <p>Special content for qualified users!</p>
</div>

Вы можете использовать множество операторов rxjs для отображения, фильтрации, упорядочивания или всего, что вам нужно сделать, в наблюдаемое состояние.