Angular 2：点击路由链接时如何取消所有路由解析器？

这确实是Angular Router的预期默认行为。Resolver的设计初衷是确保目标路由在数据完全就绪后才完成激活，所以默认情况下，当你发起新的导航操作（比如点击链接、调用navigateByUrl）时，Router会先等待当前正在执行的Resolver Observable完成，再处理新的导航请求——这就是你只看到ResolveStart事件后没有后续动作的原因。

不过你说得对，每个Resolver都手动合并取消信号确实冗余，这里有个更简便的通用解决方案：

封装可取消的Resolver基类 #

我们可以创建一个通用的基类，把“监听新导航并取消当前请求”的逻辑封装进去，所有需要支持导航取消的Resolver都继承这个基类，一次性解决重复代码问题。

第一步：创建通用基类 #

import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { Observable, takeUntil } from 'rxjs';
import { filter } from 'rxjs/operators';

@Injectable()
export abstract class CancellableResolver<T> implements Resolve<T> {
  constructor(private router: Router) {}

  // 子类需要实现这个方法，编写具体的数据获取逻辑
  abstract fetchData(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<T>;

  // 封装了取消逻辑的resolve方法，子类无需修改
  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<T> {
    // 监听新的导航开始事件，当新导航的URL和当前Resolver对应的URL不同时，触发取消
    const navigationCancel$ = this.router.events.pipe(
      filter(event => event.type === 1), // NavigationStart的事件类型码
      filter((event: any) => event.url !== state.url)
    );

    // 用takeUntil监听取消信号，一旦新导航发起，立即终止当前数据请求
    return this.fetchData(route, state).pipe(
      takeUntil(navigationCancel$)
    );
  }
}

第二步：业务Resolver继承基类 #

现在你的业务Resolver只需要继承这个基类，实现fetchData方法即可，不用再写重复的取消逻辑：

import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs';
import { YourDataService } from './your-data.service';
import { CancellableResolver } from './cancellable-resolver';
import { YourDataType } from './your-data.type';

@Injectable()
export class YourDataResolver extends CancellableResolver<YourDataType> {
  constructor(
    private dataService: YourDataService,
    router: Router // 传递给父类构造器
  ) {
    super(router);
  }

  // 只需要实现数据获取逻辑即可
  fetchData(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<YourDataType> {
    const itemId = route.paramMap.get('id');
    return this.dataService.fetchItemById(itemId);
  }
}

原理说明 #

当用户发起新的导航时，navigationCancel$会捕捉到NavigationStart事件，并且判断新导航的URL和当前Resolver对应的目标URL不同，此时takeUntil会立即终止当前的Observable数据流。Router检测到Resolver的Observable完成（或者说终止）后，就会放弃当前路由的激活流程，转而处理新的导航请求，不会再一直等待原Resolver的结果。

这个方案的好处是只需要写一次通用逻辑，所有Resolver都能复用，完全避免了冗余代码。

内容的提问来源于stack exchange，提问作者ondrej.par