Angular 2 路由器查询参数未添加到 url

Question

我有一个身份验证守卫，它可以保护我的网络应用程序的某些页面。在重定向期间，我想将 queryParams 添加到我的 url 以允许用户返回到他想要通过的站点。下面的代码工作了一段时间。今天我意识到 url 中不存在 queryParms

async canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<boolean> {
  let isLogged: boolean =  this.loggedInCustomer.isLoggedIn();
  if (!isLogged) {
    console.log(state.url);
    this.router.navigateByUrl(this.env.getLoginUrl(), { queryParams: {returnUrl: state.url}});
      return false;
    }
    return true;
 }

我检查了 state.url 是正确的。所以问题可能在于创建路由器 url。

我已经做了临时解决方案

this.router.navigateByUrl(`${this.env.getLoginUrl()}?returnUrl=${state.url}`);

这里是类似问题的链接 Setting router queryParams in angular 2 do not work

但我知道这样不好。你能向我解释一下这个查询我做错了什么吗？为什么它停止工作？问候！

Answer 1

NavigateByUrl 始终是绝对的Angular Doc's。相反，您可以使用navigate:

    let navigationExtras: NavigationExtras = {
      queryParams: { 'returnUrl': state.url },
      fragment: 'anchor'
    };

    this.router.navigate([this.env.getLoginUrl()], navigationExtras);