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

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');
  }
}

不幸的是，最干净的解决方案并不是最可扩展的解决方案。在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']
        }
    }
}

当你有一个空路由对象时，这主要是因为你没有在app.component.html中使用路由器出口。

如果没有这个，你将无法获得一个有意义的非空子对象的路由对象，特别是params和queryParams。

尝试添加<router-outlet><router-outlet> < app-main-component > < / app-main-component >

在此之前，确保你在App -routing >中准备好了查询参数，它导出了App组件使用的类Route:

param: '/param/:dynamicParam', path: MyMainComponent

当然，最后一件事，为了获得你的参数，我个人使用this.route.snapshot.params.dynamicParam，其中dynamicParam是在你的app-routing组件中使用的名称:)

小心你的路线。“redirectTo”将删除|删除任何查询参数。

const appRoutes: Routes [
 {path: "one", component: PageOneComponent},
 {path: "two", component: PageTwoComponent},
 {path: "", redirectTo: "/one", pathMatch: full},
 {path: "**", redirectTo: "/two"}
]

我用查询参数调用主组件，比如“/main?”param1=a&param2=b，并假设我的查询参数在重定向转发生效之前到达主组件中的“ngOnInit()”方法。

但这是错误的。重定向将出现在前面，删除查询参数并在没有查询参数的情况下调用主组件中的ngOnInit()方法。

我把第三条路线改成了

{path: "", component: PageOneComponent},

现在我的查询参数可以在主要组件ngOnInit和PageOneComponent中访问。

查询和路径参数(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);

父组件从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();
  }

}