페이지를 새로 고치지 않고 조건부로 2 차원 상쾌한 실시간 데이터

Question

API 서비스에서 트랜잭션을받습니다. 트랜잭션 상태가 '보류 중'인 경우 조건은 트랜잭션 상태가 '완료'가 될 때까지 계속 다시로드하고 구독합니다. '거절 당했다'. 내 코드는 처음으로 작동하고 다음에 방문 할 때 페이지가 비어 있지만 데이터를 탈퇴하더라도 콘솔에서 데이터가 계속 실행됩니다.

여기 내 코드입니다 :

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' 
     }); 
} 

이것으로 당신은 이론적으로 다른 모든 구독을 삭제할 수 있습니다.