Есть ли другой способ автоматической подписки / отмены подписки на наблюдаемый канал, кроме asyn c? - PullRequest
Новая
       7

Есть ли другой способ автоматической подписки / отмены подписки на наблюдаемый канал, кроме asyn c?

1 голос
/ 12 апреля 2020

Мне интересно, есть ли другой способ автоматической подписки / отписки от наблюдаемой? Я видел asyn c pipe в основном в html шаблоне, но что делать, когда я хочу что-то сделать в классе компонентов, например, когда вы работаете в angular проекте.

Ответы [ 3 ]

3 голосов
/ 12 апреля 2020

Я бы порекомендовал один из следующих методов отказа от подписки:

  1. asyn c pipe
  2. Использование оператора takeUntil : 
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit, OnDestroy {
  private readonly componentDestroyed$ = new Subject();

  ngOnDestroy(): void { this.componentDestroyed$.next() }

  ngOnInit(): void {
    myObservable$.pipe(takeUntil(this.componentDestroyed$)).subscribe(() => {
      // your code here...
    })
  }
}
Использование subsink для управления подписками Использование подхода на основе декоратора, например ngx-auto-unsubscribe для angular <9 или <a href="https://github.com/ngneat/until-destroy" rel="nofollow noreferrer"> до-уничтожить для angular> = 9
1 голос
/ 12 апреля 2020

Вероятно, вы можете создать базовый класс для этого и расширить его своим классом компонента, тогда вам не нужно повторять обработку ngDestory для каждого компонента, который вы создали. 

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

    addSubscription(...sub): Subscription | Subscription[] {
        this._subscriptions.concat(sub);
        return sub;
    }

    ngOnDestroy(): void {
        this._subscriptions.forEach(s =>
            s.unsubscribe()
        );
    }
}

пример использования 

class MyComp extends BaseComponent{
    ngOnInit(){
        this.addSubscription(interval(1000).subscribe())
    }
}
0 голосов
/ 12 апреля 2020

Вы можете использовать тему поведения, подобную этой 

    import { Component, OnInit, OnDestroy } from '@angular/core';
    import { Subject } from 'rxjs';
    import { takeUntil } from 'rxjs/operators';
    export class ComponentA implements OnInit, OnDestroy {
     private componentUnload$ = new Subject<boolean>();

       constructor(
        public dataService: DataService,
      ) {}


        ngOnInit() {
        this.dataService.items$ // here, you are calling an observable
          .pipe(takeUntil(this.componentUnload$))
          .subscribe(items => {
            this.items = items;
          });
      }

      ngOnDestroy(): void {
        this.componentUnload$.next(true);
      }
...