如何使用解析器处理Angular 路由中存储的查询参数以避免任何额外的导航

您可以使用下面的代码进行导航，我选中了一个复选标记以避免无限循环，因为导航调用解析器，解析器将再次导航，依此类推，因此该判断将确保当所有查询参数都存在时，导航停止.我希望它能解决你的问题

import { inject } from '@angular/core';
import {
  ActivatedRouteSnapshot,
  Router,
  RouterStateSnapshot,
} from '@angular/router';
import { of } from 'rxjs';
import { switchMap, tap } from 'rxjs/operators';
import { CodeService } from '../services/code.service';

export const queryParamsResolver = (
  route: ActivatedRouteSnapshot,
  state: RouterStateSnapshot
) => {
  const router = inject(Router);
  const productId = route.paramMap.get('id');
  const status = route.queryParamMap.get('status');
  const code = route.queryParamMap.get('code');

  if (!productId) {
    return of(undefined);
  }

  // is possible navigate from here instead of send the data the component
  return inject(CodeService)
    .getQueryParamerts(+productId)
    .pipe(
      switchMap((query: any) => {
        if (!status || !code) {
          return router.navigate([state.url], {
            queryParams: query,
            queryParamsHandling: 'merge',
          });
        }
        return of(true);
      })
    );
};

stackblitz个