ページを更新せずに条件付きで角度2+リフレッシュリアルタイムデータを条件付きで

Question

トランザクションステータスが '保留中'の場合は条件があり、トランザクションステータスが '完了'になるまでトランザクションをリロードしてサブスクライブします。 '拒否されました'。私のコードは初めてのみ、次回の訪問時にはページが空白ですが、データを登録解除したにもかかわらずデータはコンソールで実行されます。

は、ここに私のコードです：

export class TransactionSummaryComponent implements OnInit, OnDestroy { 

    transaction: Models.Transaction = <Models.Transaction>{}; 

    cancelling: boolean = false; 
    goToPayment: boolean = false; 

    private dataRefreshSub: Subscription; 
    private subscribeToDataSub: Subscription; 
    private timer: Observable<any>; 

    constructor(
    private route: ActivatedRoute, 
    private router: Router, 
    private apiService: ApiService, 
    private zone: NgZone, 
    @Inject(PLATFORM_ID) private platformId: Object) { } 

    ngOnInit() { 
    if (isPlatformBrowser(this.platformId)) { 
     this.getTransaction(); 
    } 
    } 

    getTransaction() { 
    this.route.paramMap 
    .switchMap((params: ParamMap) => this.apiService.getTransaction(params.get('id'))) 
    .subscribe((transaction: Models.Transaction) => { 
     this.transaction = transaction; 

     if (this.transaction.status === 'Pending') { 
     this.refreshData(); 
     } 
    }); 
    } 

    refreshData() { 
    this.dataRefreshSub = this.route.paramMap 
     .switchMap((params: ParamMap) => this.apiService.getTransaction(params.get('id'))) 
     .subscribe((transaction: Models.Transaction) => { 
     this.transaction = transaction; 
     this.subscribeToData(); 
     }); 
    } 

    subscribeToData() { 
    this.zone.runOutsideAngular(() => { 
     NgZone.assertNotInAngularZone(); 
     this.timer = Observable.timer(1, 5000); 
     this.subscribeToDataSub = this.timer 
     .subscribe(() => { 
      this.refreshData(); 
     }); 
    }); 
    } 

    ngOnDestroy() { 
    if (this.dataRefreshSub !== undefined) { 
     this.dataRefreshSub.unsubscribe(); 
    } 
    if (this.subscribeToDataSub !== undefined) { 
     this.subscribeToDataSub.unsubscribe(); 
    } 
    } 
} 

Answer 1

私は副作用を使用しない解決策を考え出すことができませんでしたが、私はそれはあなたを助けるかもしれないと思います。 Rxjsにはretry()演算子があります。この演算子は、スローされたときにサブスクリプションを再実行します。だから、私は次のようなことをします：

getTransaction() { 
    this.route.paramMap 
     .switchMap((params: ParamMap) => this.apiService 
      .getTransaction(params.get('id')) 
      .do(transaction => this.transaction = transaction) // Bad side effect here, I'm not sure how can this be cleaned out. 
      .map(transaction => { 
       if(transaction.status === 'Pending') { 
        throw 'Pending'; 
       } 
       return transaction; 
      }) 
      // use .retry(N) to retry at most N times. This will infinitely retry 
      .retryWhen(errors => errors) 
     ) 
     .subscribe((transaction: Models.Transaction) => { 
      // Here transaction will be 'Completed' or 'Rejected' 
     }); 
} 

これで、他のすべてのサブスクリプションを理論的に削除することができます。