Angular2キャンセル経路の変更（非同期リゾルバを使用している場合）

Question

最近Angular2でプレイを開始しました。 は、私はこのようなリゾルバを使用することを開始しました：

export class LoaderComponent { 
 
    @HostBinding('class.active') active:boolean = false; 
 

 
    constructor(private router: Router, private location: Location) { 
 
    router.events.subscribe(this.handleRouteChange.bind(this)); 
 
    } 
 

 
    onCancelButtonClicked() { 
 
    this.active = false; 
 
    //Any idea? 
 
    } 
 

 
    private handleRouteChange(event: Event) { 
 
    if (event instanceof NavigationStart) { 
 
     console.log('START'); 
 
     this.active = true; 
 
    } else 
 
     console.log('END'); 
 
     this.active = false; 
 
    } 
 
    } 
 
}

がthis.api.get('days')がゆっくり実行していることを想像して、あなたがしたい：私は基本的なローダコードを実装

export class SomeResolver implements Resolve<[Day]> { 
 
    constructor(private api: API) {} 
 
    resolve(
 
    route: ActivatedRouteSnapshot, 
 
    state: RouterStateSnapshot 
 
    ):Observable<any> { 
 
    return this.api.get('days') 
 
    } 
 
}

そのリクエストをキャンセルする"xhr.abort（）"のようにして前のルートに戻ります。 "location.back（）"を使用しようとしましたが、このルート変更はルータキューに参加するだけです。 "router.navigate（...）"と同じです。 リクエストを即座にキャンセルして以前のルートに戻る方法が見つかりませんでした。

この問題を解決する方法はありますか？

Answer 1

時間の経過後にエラーが発生し、リクエストと併合する別のオブザーバブルを作成できます。次のデモの例を参照してください。

私はここで、要求が、返されるので、マージされたストリームは、ルートの移行をキャンセルして、その結果、エラー終了前にエラーを発するストリームを作成しました。

要求ストリームからの値が$timeoutストリームから放出されたエラーの前に来た場合、ルートは解決されます。 （ここで、このコードで遊ぶことができます：http://jsbin.com/wiyawolete/edit?js,console）

// this stream represents your .get request 
 
const request$ = Rx.Observable.interval(5000).take(1); 
 

 
// and this is the show-stopper 
 
const timeout$ = Rx.Observable.timer(1000).switchMap(Rx.Observable.throw()); 
 

 
request$.merge(timeout$).take(1) 
 
    // the subscription here is just to show the result. 
 
    // you won't put it in your resolver 
 
    .subscribe(console.log.bind(console),() => console.error('REJECTION'));

<script src="https://unpkg.com/@reactivex/rxjs@5.0.0-beta.7/dist/global/Rx.umd.js"></script>