如何为Angular Router导航实现请求队列以避免导航冲突？

当前你的RoutingService在连续调用addQueryParams或removeQueryParam时，若前一次导航未完成，后一次会直接取消前一次导航，导致不符合预期的行为。通过维护一个导航任务队列，让所有导航操作按顺序执行，就能彻底解决这个问题。

修改后的完整实现：

import { Injectable } from '@angular/core';
import { Router, ActivatedRoute, Params } from '@angular/router';

@Injectable({ providedIn: 'root' })
export class RoutingService {
  // 初始化导航队列为已完成的Promise，确保第一个任务能立即执行
  private _navigationQueue: Promise<void> = Promise.resolve();

  constructor(
    private _router: Router,
    private _activatedRoute: ActivatedRoute
  ) {}

  addQueryParams(params: Params): Promise<void> {
    // 将当前导航任务追加到队列末尾，等待前一个任务完成后执行
    this._navigationQueue = this._navigationQueue.then(() => 
      this._router.navigate([], {
        relativeTo: this._activatedRoute,
        queryParams: params,
        queryParamsHandling: 'merge',
      })
    );
    return this._navigationQueue;
  }

  removeQueryParam(name: string): Promise<void> {
    this._navigationQueue = this._navigationQueue.then(() => 
      this._router.navigate([], {
        relativeTo: this._activatedRoute,
        queryParams: {
          [name]: null,
        },
        queryParamsHandling: 'merge',
      })
    );
    return this._navigationQueue;
  }
}

核心原理 #

• 用_navigationQueue变量维护一个Promise链，所有导航操作都会按顺序加入这个链
• 只有前一个导航任务（Promise）成功完成后，才会触发下一个导航操作
• 每个方法返回队列的Promise，调用方可以选择监听导航完成或失败的状态

可选优化：处理导航失败 #

如果需要避免单个导航失败导致整个队列中断，可以添加错误捕获逻辑：

addQueryParams(params: Params): Promise<void> {
  this._navigationQueue = this._navigationQueue
    .then(() => 
      this._router.navigate([], {
        relativeTo: this._activatedRoute,
        queryParams: params,
        queryParamsHandling: 'merge',
      })
    )
    .catch(error => {
      console.error('添加查询参数导航失败:', error);
      // 若希望后续任务继续执行，这里不要抛出错误；若需要调用方处理，可抛出
      throw error;
    });
  return this._navigationQueue;
}

内容的提问来源于stack exchange，提问作者sasteg