为什么 queryparamhandling: "preserve" 没有按预期工作？答案

【问题标题】：Why queryparamshandling: "preserve" is not working as expected?为什么 queryparamhandling: "preserve" 没有按预期工作？
【发布时间】：2021-03-20 04:43:00
【问题描述】：

朋友们，我遇到了无法按预期工作的 queryParamsHandling 参数。在我的应用程序中，我有一个 redirect 服务，它只是通过使用选择器并根据角色重定向到特定的 url 检查用户角色。代码如下。我想要的只是保存 queryParams 并将它们重定向到不同的路线上。我发现 queryParamsHandling 就是为了这个。但它总是刷新重定向 URL 上的所有 queryParams。我希望初始网址如：http://main-page.com?param1=500 重定向为 http://main-page-unauth.com?param1=500 后仍保留查询参数 1。无论有多少查询参数，这都适用 - 1,2,3...1000

import { Injectable } from '@angular/core';
import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot, ActivatedRoute } from '@angular/router';
import { Observable  } from 'rxjs';
import { select, Store } from "@ngrx/store";
import * as fromAuth from "../reducers";
import { map, take, tap } from "rxjs/operators";
import { HttpParams } from "@angular/common/http";

@Injectable({
  providedIn: 'root'
})
export class RedirectGuardService implements CanActivate {

  constructor(
    private router: Router,
    private store: Store<fromAuth.State>,
    private activatedRoute: ActivatedRoute
  ) {
  }

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {

    return this.store.pipe(
      select(fromAuth.selectRole),
      tap((role) => {
        if (role)
          this.router.navigate([state.url + '-' + role]).then()
        else 
           this.router.navigate([ '/main-unauth'], { queryparamshandling: 'preserve' })
            .then()
      }),
      take(1),
      map(() => true)
    )
  }
}

我什至调试了那段代码，并且可以清楚地看到查询参数处理何时被检查。在那一刻 currentUrlTree 总是 null。

case 'preserve':
    q = this.currentUrlTree.queryParams;
    break;

如何保存 queryParams 并将其传递给重定向的 URL？谢谢

更新： queryparamshandling 在组件中按预期工作（加载应用程序时）。问题是我试图在 canActivate 处理中使用它。在这种情况下如何传递 queryParams ？

【问题讨论】：

在同一行代码中，我可以通过 windows.location.search{href} 访问 queryParams

标签： angular angular-router

【解决方案1】：

好像你有错字：

尝试改变

this.router.navigate([ '/main-unauth', { queryparamshandling: 'preserve' } ])

到

this.router.navigate([ '/main-unauth' ], { queryparamshandling: 'preserve' } )

【讨论】：

谢谢，这只是示例中的错字。我只是提醒我粘贴了错误的代码。当然，我尝试了正确的方法以及与正确代码相关的所有信息。
那案子呢？你有像queryParamsHandling这样的吗？
是的，只是用 camelCase 进行了仔细检查。我已经添加并更新了问题头。看看吧
当我尝试在服务中使用 Route 而不是组件时，我遇到了类似的情况。只有当路由实例被注入到必须在路由被解析时在出口中显示的组件中时，路由实例才知道当前的 URL 参数。内部服务不起作用。这是我解决它的方法： this.currentRouteParams$ = this.router.events.pipe(shareReplay(), filter(e => (e instanceof ActivationEnd) && (Object.keys(e.snapshot.params).length > 0 )),map(e => e instanceof ActivationEnd ? e.snapshot.params : {}));你可以试试这个来获取查询参数
Artem S. 谢谢你的回答。我也会尝试的。我在上面发布了一个更简单的解决方案

【解决方案2】：

queryParamsHandling 在 canActivate 保护期间不起作用。如果要保留 queryParams，则需要使用 ActivatedRouteSnapshot 手动传递 queryParams

https://stackoverflow.com/a/45843291/372212

解决方案有效。而且还有解释。

【讨论】：