Angular2 Abbrechen der Route Übergang (bei asynchronen Resolver)

Question

Kürzlich begann ich mit Angular2 zu spielen. Ich begann Resolver wie folgt zu verwenden:

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

I Grund loader Code implementiert:

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

Stellen Sie sich vor, dass this.api.get('days') führt langsam und Sie möchten Abbrechen Sie diese Anfrage wie "xhr.abort()" und zurück zur vorherigen Route. Ich habe versucht, "location.back()" zu verwenden, aber diese Route ändert nur die Router-Warteschlange. Das gleiche gilt für "router.navigate (...)". Ich konnte keine Möglichkeit finden, die Anfrage sofort abzubrechen und zur vorherigen Route zurückzukehren.

Haben Sie eine Idee, wie Sie dieses Problem angehen können?

Answer 1

Sie können eine weitere Observable erstellen, die nach einer bestimmten Zeit einen Fehler ausgibt, und sie mit Ihrer Anfrage zusammenführen. Sehen Sie sich ein Beispiel in der folgenden Demo an.

Ich habe hier erstellt einen Strom, der den Fehler emittiertvor die Anfrage zurückgegeben wird, damit das fusionierte Strom endet in Fehler, die in der Aufhebung Route Übergang führt.

Wenn der Wert aus dem Anforderungsstream vor dem Fehler stand, der vom $timeout-Stream ausgegeben wurde, wird die Route aufgelöst. (man kann hier mit diesem Code spielen: 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>