顯示導航裝載器微調器延遲角度2+

Question

我是新的角度2+和RxJS，試圖習慣RxJS。

我展示的路線轉變負載微調，但只有當它需要更多的則一定時間，拉特說160毫秒
我有一個負載微調作爲一個單獨的組件，以訂閱NGRX店，所以我顯示/隱藏負荷基於瘡（showSpinner）值

在我的應用程序根組件飛旋，我訂閱了路由器改變事件，並派遣行爲（SHOW_SPINNER/HIDE_SPINNER）
所以現在的問題是，有沒有更簡單的方式來實現它？

這裏是我的代碼

.... 

export const navigationStreamForSpinnerStatuses = { 
    NAVIGATION_STARTED: 'NAVIGATION_STARTED', 
    NAVIGATION_IN_PROGRESS: 'NAVIGATION_IN_PROGRESS', 
    NAVIGATION_ENDED: 'NAVIGATION_ENDED' 
}; 

....部分

private navigationStartStream; 
private navigationStartStreamWithDelay; 
private navigationFinishStream; 

constructor(private store: Store<IAppState>, private router: Router) { 
    this.navigationStartStream = router.events 
    .filter(event => { 
     return event instanceof NavigationStart; 
    }) 
    .map(() => navigationStreamForSpinnerStatuses.NAVIGATION_STARTED); 

    this.navigationStartStreamWithDelay = this.navigationStartStream 
    .delay(160) 
    .map(() => navigationStreamForSpinnerStatuses.NAVIGATION_IN_PROGRESS); 

    this.navigationFinishStream = router.events 
    .filter(event => { 
     return event instanceof NavigationEnd || event instanceof NavigationCancel || event instanceof NavigationError; 
    }) 
    .map(() => navigationStreamForSpinnerStatuses.NAVIGATION_ENDED); 

    this.navigationStartStream 
    .merge(this.navigationFinishStream) 
    .merge(this.navigationStartStreamWithDelay) 
    .pairwise() 
    .subscribe([previousStatus, currentStatus] => { 
     if (previousStatus !== navigationStreamForSpinnerStatuses.NAVIGATION_ENDED && currentStatus === navigationStreamForSpinnerStatuses.NAVIGATION_IN_PROGRESS) { 
     this.store.dispatch({ type: StateLoaderSpinnerActionsTypes.SHOW_SPINNER }); 
     } else if (previousStatus === navigationStreamForSpinnerStatuses.NAVIGATION_IN_PROGRESS && currentStatus === navigationStreamForSpinnerStatuses.NAVIGATION_ENDED) { 
     this.store.dispatch({ type: StateLoaderSpinnerActionsTypes.HIDE_SPINNER }); 
     } 
    }); 
} 

Answer 1

利用takeUntil運營商取消微調計時器，如果它的時間之前返回。此外，使用timer創建一個熱點觀察點，以在經過一段時間後觸發一個動作。

takeUntil返回源可觀察序列的值，直到另一個可觀察序列或Promise產生一個值。

https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/takeuntil.md

timer返回產生一個值duetime參數已經過去，然後將每個週期之後後可觀察到的序列。

https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/timer.md

您可以通過在每個流處理直接派遣這裏簡化你的邏輯。

this.navigationEnd$ = router.events 
    .filter(event => event instanceof NavigationEnd || event instanceof NavigationCancel || event instanceof NavigationError); 

this.navigationStart$ = router.events 
    .filter(event => event instanceof NavigationStart) 
    .subscribe(_ => { 
    Observable.timer(160) 
     .takeUntil(this.navigationEnd$) 
     .subscribe(_ => this.store.dispatch({ type: StateLoaderSpinnerActionsTypes.SHOW_SPINNER }); 
    }); 

this.navigationEnd$.subscribe(_ => this.store.dispatch({ type: StateLoaderSpinnerActionsTypes.HIDE_SPINNER }); 

所以我們所做的是聽導航的起點和開始timer爲160毫秒。如果導航結束事件發生在定時器之前，則不會顯示微調器（takeUntil）。否則，商店行爲將被派發，並且微調將顯示。無論是否顯示微調，在導航完成後，我們會發送隱藏微調操作。