rxjsのhttpサブスクリプションをキャンセルします

Question

私の角形のアプリケーションでは、Rxjsを使ってmakeをキャンセルしてhttp要求することができます。シナリオ：

isComponentAlive = true; 

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

ngOnDestroy() { 
    this.isComponentAlive = false; 
} 

私は別のルートにナビゲートするキャンセルボタンがあります。保留中のhttpリクエストを取り消したいのですが、この方法は機能していません。私はより明確なことをしてから、すべてのhttpリクエストの購読を購読解除するようにしたいと思います。

Answer 1

購読をキャンセルするには、購読を取り消す必要があります。

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

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

そして、これはトリックを行う必要があります:)一般的に

Answer 2

これを行うには、次の2つの方法があります。手動

1. あなたはまた、Subscriptionクラスのインスタンスを1つ作成し、それにハンドラを追加することができます

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

   退会：

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

   あなたがする必要はありません。この方法を複数のサブスクリプションを持ち、手動でunsubscribe()を呼び出してください。

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

観察可能なソースを完了するために、Subjectのインスタンスを使用ところで、これはあなたに非常によく似質問です：RxJS: takeUntil() Angular component's ngOnDestroy()