我使用的是angular 5.0.3,我想用一堆查询参数启动我的应用程序,比如/app?param1=hallo&param2=123。如何在Angular 2中从url中获取查询参数?对我没用。

有什么想法如何获得查询参数工作?

private getQueryParameter(key: string): string {
  const parameters = new URLSearchParams(window.location.search);
  return parameters.get(key);
}

这个私有函数帮助我获取参数,但我认为在新的Angular环境中这不是正确的方式。

(更新:) 我的主应用程序是这样的

@Component({...})
export class AppComponent implements OnInit {

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    // would like to get query parameters here...
    // this.route...
  }
}

当前回答

这对我很管用。我已经在路由模块中使用了子路由。


 this.route.firstChild.snapshot.paramMap.get('id');
   

其他回答

查询和路径参数(Angular 8)

url,如https://myapp.com/user/666/read?age=23使用

import { combineLatest } from 'rxjs';
// ...

combineLatest( [this.route.paramMap, this.route.queryParamMap] )
  .subscribe( ([pathParams, queryParams]) => {
    let userId = pathParams.get('userId');    // =666
    let age    = queryParams.get('age');      // =23
    // ...
  })

更新

如果你使用this.router.navigate([someUrl]);你的查询参数被嵌入到someUrl字符串中,然后angular对URL进行编码,你会得到类似https://myapp.com/user/666/read%3Fage%323的东西——以上解决方案会给出错误的结果(queryParams将为空,路径参数可以粘在最后一个路径参数上,如果它在路径端)。在这种情况下,改变导航的方式

this.router.navigateByUrl(someUrl);

简单的解决方案

 // in routing file
       {
            path: 'checkout/:cartId/:addressId',
            loadChildren: () => import('./pages/checkout/checkout.module').then(m => m.CheckoutPageModule)
          },

    // in Component file

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

                 constructor(
                      private _Router: ActivatedRoute
                  ) { }

                  ngOnInit() {
                    this.cartId = this._Router.snapshot.params.cartId;
                    this.addressId = this._Router.snapshot.params.addressId;
                    console.log(this.addressId, "addressId")
                    console.log(this.cartId, "cartId")
                  }

刚刚偶然发现了同样的问题,这里的大多数答案似乎只解决了Angular内部路由的问题,然后其中一些解决了路由参数,这与请求参数不一样。

我猜我的用例与Lars最初的问题类似。

对我来说,用例是推荐跟踪:

Angular运行在mycoolpage.com上,使用散列路由,所以mycoolpage.com会重定向到mycoolpage.com/#/。然而,对于推荐,像mycoolpage.com?referrer=foo这样的链接也应该可用。不幸的是,Angular立即删除了请求参数,直接转到mycoolpage.com/#/。

任何一种使用空组件+ AuthGuard和获得queryParams或queryParamMap的“技巧”,不幸的是,对我不起作用。它们总是空的。

我的解决方案是在index.html中的一个小脚本中处理这个问题,该脚本获得完整的URL和请求参数。然后,我通过字符串操作获得请求参数值,并将其设置在窗口对象上。然后,一个单独的服务处理从窗口对象获取id。

index . html脚本

const paramIndex = window.location.href.indexOf('referrer=');
if (!window.myRef && paramIndex > 0) {
  let param = window.location.href.substring(paramIndex);
  param = param.split('&')[0];
  param = param.substr(param.indexOf('=')+1);
  window.myRef = param;
}

服务

declare var window: any;

@Injectable()
export class ReferrerService {

  getReferrerId() {
    if (window.myRef) {
      return window.myRef;
    }
    return null;
  }
}

不幸的是,最干净的解决方案并不是最可扩展的解决方案。在Angular的最新版本中,其他答案中建议你可以使用ActivatedRoute injectable,特别是使用snapshot属性,轻松获取查询参数:

this.route.snapshot.queryParamMap.get('param')

或者订阅属性(在查询字符串会更新的情况下使用,例如通过用户id导航):

this.route.queryParamMap.subscribe(params => console.log(params));

我在这里告诉你,这些解决方案有一个巨大的缺陷,一段时间没有得到解决:https://github.com/angular/angular/issues/12157

总而言之,唯一的防弹解决方案是使用优秀的老香草javascript。在本例中,我为URL操作创建了一个服务:

import { Injectable } from '@angular/core';
import { IUrl } from './iurl';

@Injectable()
export class UrlService {
    static parseQuery(url: string): IUrl {
        const query = url.slice(url.indexOf('?')+1).split('&').reduce( (acc,query) => {
            const parts = query.split('=');
            acc[parts[0]] = parts[1];
            return acc;
        }, {});

        return {
            a: query['a'],
            b: query['b'],
            c: query['c'],
            d: query['d'],
            e: query['e']
        }
    }
}

这对我很管用。我已经在路由模块中使用了子路由。


 this.route.firstChild.snapshot.paramMap.get('id');