Angular2取消路由转换（使用异步解析器时）

最近我开始玩Angular2。我开始使用解析器是这样的：Angular2取消路由转换（使用异步解析器时）

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

我实现基本装载代码：

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')慢慢地执行，并要取消该请求像“xhr.abort（）”并返回到前一个路线。我试过使用“location.back（）”，但是这个路由改变只是加入了路由器队列。与“router.navigate（...）”一样。我无法找到一种方法来即时取消请求并返回到之前的路线。

你知道如何解决这个问题吗？

来源

2016-12-13 Mikołaj Grzyb

检查[这]（http://stackoverflow.com/questions/39061623/how-to-cancel-route-change：（http://jsbin.com/wiyawolete/edit?js,console你可以用这个代码在这里扮演） -in-angular-2），希望它有帮助！ –

谢谢您的回复！恐怕canDeactivate在解析器开始工作之前运行。它并没有真正解决问题:( –

您可以创建另一个observable，在给定时间后发出错误并将其与请求合并。查看下面的演示示例。

我在这里创建的流发出错误之前返回请求，因此，合并的流以错误结束，这导致消除路径过渡。

如果请求流中的值来自$timeout流发出的错误之前，则路由将被解析。

// 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/[email protected]/dist/global/Rx.umd.js"></script>

来源

2016-12-13 21:05:39

谢谢，Tomek！你的想法帮助了我的记录：我需要使用Observable.create创建自己的Observable，并将其放在loaderservice的监听器中。。 –

Angular2取消路由转换（使用异步解析器时）

回答

相关问题