Более простой метод отписки от наблюдаемого в Angular 7 - PullRequest
Новая
       16

Более простой метод отписки от наблюдаемого в Angular 7

0 голосов
/ 09 декабря 2018

У меня есть реализация, которая автоматически отписывается от Observables, когда компонент уничтожается с помощью takeUntil.Но досадно реализовывать один и тот же код во многих компонентах.

Я хочу знать, можно ли это упростить (я не могу использовать async pipe, потому что мне нужны испускаемые значения вкомпонент Typescript)

Вот моя текущая реализация: 

export class Component implements OnDestroy {
    _dstr = new Subject();

    data$: Observable<any> = this.store.select(Selector.getData);

    constructor(
        private store: Store<State>,
    ) {
        this.store.pipe(
            select(Selector.getOtherData),
            takeUntil(this._dstr),
        ).subscribe(data => {
            console.log('here is my data!', data)
        });
    }

    public ngOnDestroy(): void {
        this._dstr.next();
        this._dstr.complete();
    }

}

1 Ответ

0 голосов
/ 09 декабря 2018

вы можете собрать все ваши подписки в массиве и отписаться от каждой в функции ngOnDestroy.Если вам нужно такое поведение очень часто, вы можете рассмотреть возможность использования абстрактного класса, из которого вы расширяете все свои компоненты, из которых он делает это для вас. 

import { Component, OnDestroy, OnInit } from '@angular/core';
import { Subscription, Observable, of } from 'rxjs';

export abstract class BaseComponent implements OnDestroy{
  public subscriptions: Subscription[] = [];

  public ngOnDestroy(): void {
    console.log("destroyed");
    this.subscriptions.forEach(s => s.unsubscribe());
  }
}

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent {

}

let count: number = 0;
@Component(
  {
    selector: 'app-derived',
    template: 'Derived Class'
  }
)
export class DerivedComponent extends BaseComponent implements OnInit, OnDestroy {
  private store: Observable<any> = of(count++);
  constructor() {
    super();
  }
  public ngOnInit(): void {
    this.subscriptions.push( this.store.subscribe(data => console.log(data)) );
  }
}

Демонстрация Blitzstack: https://stackblitz.com/edit/angular-peyoac

...