Abbrechen http-Subskription in Rxjs

Question

In meiner eckigen App möchte ich in der Lage zu stornieren und HTTP-Anfrage, die mit Rxjs machen ist. Das Szenario:

isComponentAlive = true; 

onSave() { 
    this.service.save(this.formValue).takeWhile(() => this.isComponentAlive).subscribe(); 
} 

ngOnDestroy() { 
    this.isComponentAlive = false; 
} 

als ich eine Löschtaste, die auf eine andere Strecke navigiert. Ich möchte eine ausstehende HTTP-Anfrage abbrechen, aber dieser Weg funktioniert nicht. Ich möchte etwas klarer als das Abmelden auf alle meine http-Anfrage-Abonnements tun

Answer 1

Um ein Abonnement zu stornieren, müssen Sie einen Verweis darauf behalten.

onSave() { 
    this.saveSubscription = this.service.save(this.formValue).takeWhile(() => this.isComponentAlive).subscribe(); 
} 

ngOnDestroy() { 
    this.isComponentAlive = false; 
    this.saveSubscription.unsubscribe(); 
} 

Und das sollte es tun :)

Answer 2

Im Allgemeinen gibt es zwei Möglichkeiten, dies zu tun.

1. abmelden manuell

   onSave() { 
       this.sub = this.service.save(this.formValue).subscribe(); 
   } 
   
   ngOnDestroy() { 
       this.sub.unsubscribe(); 
   } 
   

   Sie auch eine Instanz Subscription Klasse erstellen und dann nur Handler hinzufügen, um es:

   private sub = new Subscription(); 
   
   onSave() { 
       this.sub.add(this.service.save(this.formValue).subscribe()); 
   } 
   
   ngOnDestroy() { 
       this.sub.unsubscribe(); 
   } 
   

   Auf diese Weise brauchen Sie nicht zu haben Sie mehrere Abonnements und rufen Sie alle unsubscribe() manuell an.

2. eine Instanz von Subject Verwenden Sie die Quelle beobachtbare

   private subject = new Subject(); 
   
   onSave() { 
       this.sub.add(this.service.save(this.formValue).takeUntil(subject).subscribe()); 
   } 
   
   ngOnDestroy() { 
       this.subject.next(); 
   } 
   

BTW, ist dies eine sehr ähnliche Frage bei Ihnen zu vervollständigen: RxJS: takeUntil() Angular component's ngOnDestroy()