这对我来说是最干净的解决方案

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

export class MyComponent {
  constructor(
    private route: ActivatedRoute
  ) {}

  ngOnInit() {
    const firstParam: string = this.route.snapshot.queryParamMap.get('firstParamKey');
    const secondParam: string = this.route.snapshot.queryParamMap.get('secondParamKey');
  }
}

/*
Example below url with two param (type and name) 
URL : http://localhost:4200/updatePolicy?type=Medicare%20Insurance&name=FutrueInsurance
*/ 
  constructor(private route: ActivatedRoute) {
    //Read url query parameter `enter code here`
  this.route.queryParams.subscribe(params => {
    this.name= params['type'];
    this.type= params['name'];
    alert(this.type);
    alert(this.name);

 });

  }

当我在寻找类似的解决方案时偶然发现了这个问题，但我不需要像完整的应用程序级路由或更多导入模块之类的东西。

下面的代码非常适合我使用，不需要额外的模块或导入。

  GetParam(name){
    const results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href);
    if(!results){
      return 0;
    }
    return results[1] || 0;
  }

  PrintParams() {
    console.log('param1 = ' + this.GetParam('param1'));
    console.log('param2 = ' + this.GetParam('param2'));
  }

http://localhost: 4200 / ? param1 = hello&param2 = 123输出:

param1 = hello
param2 = 123

刚刚偶然发现了同样的问题，这里的大多数答案似乎只解决了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;
  }
}

父组件从ActivatedRoute获取空参数

对我有用:

import {Component, OnDestroy, OnInit} from '@angular/core';
import { Router, ActivatedRoute, Params, RoutesRecognized } from '@angular/router';

@Component({
  selector: 'app-navigation-bar',
  templateUrl: './navigation-bar.component.html',
  styleUrls: ['./navigation-bar.component.scss']
})
export class NavigationBarComponent implements OnInit, OnDestroy {
  private sub: any;
  constructor(private route: ActivatedRoute, private router: Router) {}

  ngOnInit() {
    this.sub = this.router.events.subscribe(val => {
      if (val instanceof RoutesRecognized) {
        console.log(val.state.root.firstChild.params);
      }
    });
  }

  ngOnDestroy() {
    this.sub.unsubscribe();
  }

}

它对我的作用是:

constructor(private route: ActivatedRoute) {}

ngOnInit()
{
    this.route.queryParams.subscribe(map => map);
    this.route.snapshot.queryParams; 
}

如何在angular2中从url获取查询参数?