Eckig/RxJs Wann sollte ich mich Abmelden von `Abonnement`

Sie nicht brauchen, um den Haufen von Abonnements und kündigen Sie manuell. Verwenden RxJS.Thema und takeUntil combo zu handhaben Abonnements like a boss:

import {Subject} from "rxjs/Subject";

@Component(
    {
        moduleId: __moduleName,
        selector: 'my-view',
        templateUrl: '../views/view-route.view.html',
    }
)
export class ViewRouteComponent implements OnDestroy
{
    componentDestroyed$: Subject<boolean> = new Subject();

    constructor(protected titleService: TitleService)
    {
        this.titleService.emitter1$
            .takeUntil(this.componentDestroyed$)
            .subscribe(
            (data: any) =>
            {
                //... do something 1
            }
        );

        this.titleService.emitter2$
            .takeUntil(this.componentDestroyed$)
            .subscribe(
            (data: any) =>
            {
                //... do something 2
            }
        );

        //...

        this.titleService.emitterN$
            .takeUntil(this.componentDestroyed$)
            .subscribe(
            (data: any) =>
            {
                //... do something N
            }
        );
    }

    ngOnDestroy()
    {
        this.componentDestroyed$.next(true);
        this.componentDestroyed$.complete();
    }
}

Alternativer Ansatz, die vorgeschlagen wurde @acumartini in den Kommentaren, verwendet takeWhile statt takeUntil. Sie können es vorziehen, beachten Sie aber, dass auf diese Weise Ihre Beobachtbare Ausführung nicht abgesagt werden ngDestroy der Komponente (z.B. wenn Sie langwierige Berechnungen oder warten Sie, bis die Daten vom server). - Methode, basierend auf takeUntil, hat nicht diesen Nachteil und führt zu sofortigen Löschung der Anfrage. Dank @AlexChe für eine ausführliche Erklärung in den Kommentaren.

So, hier ist der code:

@Component(
    {
        moduleId: __moduleName,
        selector: 'my-view',
        templateUrl: '../views/view-route.view.html',
    }
)
export class ViewRouteComponent implements OnDestroy
{
    alive: boolean = true;

    constructor(protected titleService: TitleService)
    {
        this.titleService.emitter1$
            .takeWhile(() => this.alive)
            .subscribe(
            (data: any) =>
            {
                //... do something 1
            }
        );

        this.titleService.emitter2$
            .takeWhile(() => this.alive)
            .subscribe(
            (data: any) =>
            {
                //... do something 2
            }
        );

        //...

        this.titleService.emitterN$
            .takeWhile(() => this.alive)
            .subscribe(
            (data: any) =>
            {
                //... do something N
            }
        );
    }

    //Probably, this.alive = false MAY not be required here, because
    //if this.alive === undefined, takeWhile will stop. I
    //will check it as soon, as I have time.
    ngOnDestroy()
    {
        this.alive = false;
    }
}

InformationsquelleAutor metamaker

Einige der besten Praktiken bezüglich der observablen ein - /Austragungen im inneren Eckigen Komponenten:

Einem Zitat aus Routing & Navigation

Abonnieren, eine beobachtbare in eine Komponente, die Sie fast immer vereinbaren Abmelden, wenn die Komponente zerstört wird.

Gibt es ein paar außergewöhnliche observablen, wo dies nicht notwendig ist. Die ActivatedRoute observablen gehören zu den Ausnahmen.

Den ActivatedRoute und seine observablen sind isoliert vom Router selbst. Der Router zerstört weitergeleitet Komponente, wenn es nicht mehr benötigt wird und der eingespritzte ActivatedRoute stirbt mit ihm.

Fühlen Sie sich frei, um sich abzumelden sowieso. Es ist harmlos und nie eine schlechte Praxis.

Und in Reaktion auf die folgenden links:

• (1) Sollte ich mich Abmelden von Winkel-2 Http Observablen?
• (2) Ist es notwendig, zum abbestellen von observablen erstellt von Http-Methoden?
• (3) RxJS: nicht Abmelden
• (4) Der einfachste Weg, um sich abzumelden von Observablen in Eckige
• (5) Dokumentation für RxJS Abmelden
• (6) Abmeldung bei einem Dienst, ist irgendwie sinnlos, da es keine chance auf memory-leaks
• (7) Brauchen wir die Abmeldung aus beobachtbaren abgeschlossen/Fehler-out?
• (8) Ein Kommentar über die http beobachten

Ich sammelte einige der besten Praktiken bezüglich der observablen ein - /Austragungen im inneren Eckigen Komponenten, mit Ihnen zu teilen:

• http beobachtbaren Abmeldung ist Voraussetzung und wir sollten uns die Auswirkungen der "subscribe callback' ausgeführt wird, nachdem das Bauteil zerstört wird auf einer Fall-zu-Fall-basis. Wir wissen, dass eckige abmeldet und reinigt die http beobachtbaren selbst (1), (2). Dies gilt aus der Perspektive der Ressourcen, die es erzählt nur die halbe Geschichte. Sagen wir, wir reden direkt aufrufen http innerhalb einer Komponente, und die http Antwort dauerte länger als nötig, so dass der Benutzer schließt die Komponente. Die subscribe() handler wird noch genannt werden, auch wenn die Komponente wird geschlossen und zerstört. Diese können unerwünschte Nebenwirkungen haben und im schlimmsten Szenarien, verlassen Sie den Status der Anwendung gebrochen. Es kann auch zu den Ausnahmen, wenn der code in die callback anzurufen versucht, etwas, das einfach entsorgt wurden. Aber zur gleichen Zeit, gelegentlich sind Sie erwünscht. Wie, sagen wir, Sie erstellen ein E-Mail-client und Sie auslösen einen Ton, wenn die E-Mail geschieht, indem - Sie würde immer noch wollen, dass auch dann auftreten, wenn die Komponente wird geschlossen (Acht).
• Keine Notwendigkeit abbestellen observablen, complete-oder error. Jedoch, es ist kein Schaden dabei(7).
• Verwenden AsyncPipe so viel wie möglich, weil es automatisch abmeldet aus dem beobachtbaren Komponente Zerstörung.
• Abbestellen ActivatedRoute observablen wie route.params wenn Sie angemeldet sind, innerhalb einer geschachtelten (Hinzugefügt innerhalb tpl mit dem component selector) oder dynamische Komponente, da Sie möglicherweise abonniert werden oft, wie lange, wie die Eltern/host-Komponente vorhanden ist. Keine Notwendigkeit abbestellen Sie in anderen Szenarien wie bereits im obigen Zitat von Routing & Navigation docs.
• Abbestellen globalen observablen gemeinsame zwischen den Komponenten ausgesetzt sind, sind durch eine Eckige service zum Beispiel, wie Sie können abonniert werden mehrere Male, solange die Komponente initialisiert wird.
• Keine Notwendigkeit abbestellen interne observablen eines application-scoped-Dienst, da dieser Dienst nie vernichtet, es sei denn, Ihre gesamte Anwendung zu bekommen ist zerstört, es gibt keinen wirklichen Grund, uns Abmelden und es gibt keine chance von memory leaks. (6).

  Hinweis: Über scoped services ich.e Komponenten-Anbieter, Sie werden zerstört, wenn die Komponente zerstört wird. In diesem Fall, wenn wir bekennen uns zu einer wahrnehmbaren innerhalb dieser provider ist, sollten wir Abmeldung von es mit die OnDestroy lifecycle-hook wird aufgerufen, wenn der service ist zerstört, laut den docs.

• Verwenden eine abstrakte Technik zu vermeiden, dass der code Durcheinander, die möglicherweise resultierte aus dem löschen von Abos. Verwalten Sie Ihre Abonnements mit takeUntil (3) oder Sie können verwenden Sie diese npm Paket erwähnt (4) Der einfachste Weg, um sich abzumelden von Observablen in Eckige.
• Jederzeit aus FormGroup observablen wie form.valueChanges und form.statusChanges
• Jederzeit aus observablen des Renderer2 service wie renderer2.listen
• Abmelden von jeder beobachtbaren anderes als ein memory-leak guard Schritt, bis Winkel-Docs explizit sagt uns, welche observablen sind unnötig, gekündigt werden (Check Problem: (5) Dokumentation für RxJS Abmeldung (Öffnen)).
• Bonus: verwenden Sie Immer die Eckige Möglichkeiten zur Bindung Veranstaltungen wie HostListener wie eckige kümmert sich gut zum entfernen von Ereignis-Listenern, wenn nötig, und verhindert, dass alle möglichen Speicherverlust aufgrund von Ereignis-bindings.

Eine schöne Letzte Tipp: Wenn Sie nicht wissen, ob eine observable wird automatisch gekündigt/beendet oder nicht, fügen Sie einen complete Rückruf subscribe(...) und prüfen, ob es wird aufgerufen, wenn die Komponente zerstört.

InformationsquelleAutor Mouneer

Winkel 2 offizielle Dokumentation bietet eine Erläuterung, wenn zu kündigen und, wenn es sicher ignoriert werden können. Haben Sie einen Blick auf diesen link:

https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirektional-service

Look für den Absatz mit der überschrift " Eltern und Kinder kommunizieren über eine service und dann das Blaue Feld:

Beachten Sie, dass wir capture the Abonnement und Abbestellung wenn Sie den AstronautComponent zerstört wird. Dies ist ein memory-leak guard Schritt. Es gibt keine tatsächliche Gefahr, in dieser app, weil die Lebensdauer eines AstronautComponent ist die gleiche wie die Lebensdauer der app selbst. Das würde nicht immer wahr sein in einer komplexeren Anwendung.

Wir fügen Sie nicht dieses Wache an der MissionControlComponent, weil, wie die Eltern, es steuert die Lebensdauer der MissionService.

Ich hoffe das hilft dir.

InformationsquelleAutor Cerny

Den offiziellen Edit #3 Antwort (und Varianten) funktioniert gut, aber die Sache, die mich erhält, ist die 'trüben' der business Logik, um die beobachtbaren Abonnement.

Hier ist ein anderer Ansatz mit Wrapper.

Warining: experimentellen code

Datei subscribeAndGuard.ts wird verwendet, um erstellen Sie eine neue Beobachtbare Erweiterung zu wickeln .subscribe() zu wickeln ngOnDestroy().

Benutzung ist die gleiche wie .subscribe(), mit Ausnahme einer zusätzlichen ersten parameter verweisen auf die Komponente.

import { Observable } from 'rxjs/Observable';
import { Subscription } from 'rxjs/Subscription';

const subscribeAndGuard = function(component, fnData, fnError = null, fnComplete = null) {

  //Define the subscription
  const sub: Subscription = this.subscribe(fnData, fnError, fnComplete);

  //Wrap component's onDestroy
  if (!component.ngOnDestroy) {
    throw new Error('To use subscribeAndGuard, the component must implement ngOnDestroy');
  }
  const saved_OnDestroy = component.ngOnDestroy;
  component.ngOnDestroy = () => {
    console.log('subscribeAndGuard.onDestroy');
    sub.unsubscribe();
    //Note: need to put original back in place
    //otherwise 'this' is undefined in component.ngOnDestroy
    component.ngOnDestroy = saved_OnDestroy;
    component.ngOnDestroy();

  };

  return sub;
};

//Create an Observable extension
Observable.prototype.subscribeAndGuard = subscribeAndGuard;

//Ref: https://www.typescriptlang.org/docs/handbook/declaration-merging.html
declare module 'rxjs/Observable' {
  interface Observable<T> {
    subscribeAndGuard: typeof subscribeAndGuard;
  }
}

Ist hier eine Komponente mit zwei Abos, eins mit dem wrapper und eine ohne. Der einzige Nachteil ist es umsetzen muss OnDestroy (mit leerer Körper, wenn gewünscht), ansonsten Eckig weiß nicht, nennen Sie die verpackte version.

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import 'rxjs/Rx';
import './subscribeAndGuard';

@Component({
  selector: 'app-subscribing',
  template: '<h3>Subscribing component is active</h3>',
})
export class SubscribingComponent implements OnInit, OnDestroy {

  ngOnInit() {

    //This subscription will be terminated after onDestroy
    Observable.interval(1000)
      .subscribeAndGuard(this,
        (data) => { console.log('Guarded:', data); },
        (error) => { },
        (/*completed*/) => { }
      );

    //This subscription will continue after onDestroy
    Observable.interval(1000)
      .subscribe(
        (data) => { console.log('Unguarded:', data); },
        (error) => { },
        (/*completed*/) => { }
      );
  }

  ngOnDestroy() {
    console.log('SubscribingComponent.OnDestroy');
  }
}

Einem demo-plunker ist hier

Ein weiterer Hinweis:
Re-Edit 3 - Die "Offizielle" Lösung, dies kann vereinfacht werden durch die Verwendung von takeWhile() anstelle von takeUntil (), bevor Abonnements, und eine einfache Boolesche eher als eine andere Observable in ngOnDestroy.

@Component({...})
export class SubscribingComponent implements OnInit, OnDestroy {

  iAmAlive = true;
  ngOnInit() {

    Observable.interval(1000)
      .takeWhile(() => { return this.iAmAlive; })
      .subscribe((data) => { console.log(data); });
  }

  ngOnDestroy() {
    this.iAmAlive = false;
  }
}

InformationsquelleAutor Richard Matsen

Versuchte ich seangwright Lösung (Edit 3)

Ist nicht Beobachtbar, erstellt durch timer-oder Intervall.

Aber ich habe es funktioniert, indem mit einem anderen Ansatz:

import { Component, OnDestroy, OnInit } from '@angular/core';
import 'rxjs/add/operator/takeUntil';
import { Subject } from 'rxjs/Subject';
import { Subscription } from 'rxjs/Subscription';
import 'rxjs/Rx';

import { MyThingService } from '../my-thing.service';

@Component({
   selector: 'my-thing',
   templateUrl: './my-thing.component.html'
})
export class MyThingComponent implements OnDestroy, OnInit {
   private subscriptions: Array<Subscription> = [];

  constructor(
     private myThingService: MyThingService,
   ) { }

  ngOnInit() {
    const newSubs = this.myThingService.getThings()
        .subscribe(things => console.log(things));
    this.subscriptions.push(newSubs);
  }

  ngOnDestroy() {
    for (const subs of this.subscriptions) {
      subs.unsubscribe();
   }
 }
}

InformationsquelleAutor Jeff Tham

In der Regel müssen Sie sich Abmelden, wenn die Bauteile zerstört, sondern Eckig ist, behandeln es mehr und mehr, wie wir gehen, zum Beispiel in neue minor-version des Angular4, haben Sie diesen Abschnitt für routing-unsubscribe:

Müssen Sie sich Abmelden?

Wie beschrieben in der
ActivatedRoute: der one-stop-shop für Informationen über die route Abschnitt der
Routing & Navigation-Seite, der Router verwaltet die observablen es
bietet und lokalisiert die Abonnements. Die Abonnements sind
aufgeräumt wird, wenn die Komponente zerstört wird, zum Schutz gegen Speicher
Lecks, so brauchen Sie nicht, um ein Abonnement der route paramMap
Beobachtbar ist.

Auch das Beispiel unten ist ein gutes Beispiel von der Winkelgeschwindigkeit um eine Komponente zu erstellen und zu zerstören nach, schauen, wie die Komponente implementiert OnDestroy, wenn Sie onInit, können Sie auch implementiert Sie in Ihre Komponenten, wie implementiert OnInit, OnDestroy

import { Component, Input, OnDestroy } from '@angular/core';  
import { MissionService } from './mission.service';
import { Subscription }   from 'rxjs/Subscription';

@Component({
  selector: 'my-astronaut',
  template: `
    <p>
      {{astronaut}}: <strong>{{mission}}</strong>
      <button
        (click)="confirm()"
        [disabled]="!announced || confirmed">
        Confirm
      </button>
    </p>
  `
})

export class AstronautComponent implements OnDestroy {
  @Input() astronaut: string;
  mission = '<no mission announced>';
  confirmed = false;
  announced = false;
  subscription: Subscription;

  constructor(private missionService: MissionService) {
    this.subscription = missionService.missionAnnounced$.subscribe(
      mission => {
        this.mission = mission;
        this.announced = true;
        this.confirmed = false;
    });
  }

  confirm() {
    this.confirmed = true;
    this.missionService.confirmMission(this.astronaut);
  }

  ngOnDestroy() {
    //prevent memory leak when component destroyed
    this.subscription.unsubscribe();
  }
}

InformationsquelleAutor Alireza

Fall kündigen ist erforderlich, im folgenden Betreiber für beobachtbare Rohr-Methode kann verwendet werden,

import { Observable, Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { OnDestroy } from '@angular/core';

export const takeUntilDestroyed = (componentInstance: OnDestroy) => <T>(observable: Observable<T>) => {
  const subjectPropertyName = '__takeUntilDestroySubject__';
  const originalOnDestroy = componentInstance.ngOnDestroy;
  const componentSubject = componentInstance[subjectPropertyName] as Subject<any> || new Subject();

  componentInstance.ngOnDestroy = (...args) => {
    originalOnDestroy.apply(componentInstance, args);
    componentSubject.next(true);
    componentSubject.complete();
  };

  return observable.pipe(takeUntil<T>(componentSubject));
};

es kann z.B. so verwendet werden:

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

@Component({ template: '<div></div>' })
export class SomeComponent implements OnInit, OnDestroy {

  ngOnInit(): void {
    const observable = Observable.create(observer => {
      observer.next('Hello');
    });

    observable
      .pipe(takeUntilDestroyed(this))
      .subscribe(val => console.log(val));
  }

  ngOnDestroy(): void {
  }
}

Der Betreiber wickelt ngOnDestroy Methode der Komponente.

Wichtig: der Betreiber sollte die Letzte sein, die in beobachtbaren Rohr.

InformationsquelleAutor Oleg Polezky

Für den Umgang Abonnement verwende ich ein "Unsubscriber" - Klasse.

Hier ist der Unsubscriber Klasse.

export class Unsubscriber implements OnDestroy {
  private subscriptions: Subscription[] = [];

  addSubscription(subscription: Subscription | Subscription[]) {
    if (Array.isArray(subscription)) {
      this.subscriptions.push(...subscription);
    } else {
      this.subscriptions.push(subscription);
    }
  }

  unsubscribe() {
    this.subscriptions
      .filter(subscription => subscription)
      .forEach(subscription => {
        subscription.unsubscribe();
      });
  }

  ngOnDestroy() {
    this.unsubscribe();
  }
}

Und Sie können diese Klasse verwenden, in einer beliebigen Komponente /Service /Effekt etc.

Beispiel:

class SampleComponent extends Unsubscriber {
    constructor () {
        super();
    }

    this.addSubscription(subscription);
}

InformationsquelleAutor Pratiyush