Angular 5：如何获取当前查询参数 [路由]答案

【问题标题】：Angular 5: How to get Current queryparams [Routing]Angular 5：如何获取当前查询参数 [路由]
【发布时间】：2018-05-18 09:56:24
【问题描述】：

我在尝试将查询参数放入组件时遇到问题。现在，我只想console.log(...) 它。我正在使用来自@angular/router 的ActivatedRoute 来完成这项任务。

我正在重新开发某个工作平台，所以不幸的是，一些不相关的代码将不得不替换为“...”

我的 Component.ts 代码：

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { RelevantReportService } from './../reportServices/relevantReports.service';
import { ActivatedRoute ,Params, Router } from '@angular/router';

@Component({
  selector: 'vr-reports',
  templateUrl: './reports.component.html',
  styleUrls: ['./reports.component.scss'],
  providers: [RelevantReportService],
  encapsulation: ViewEncapsulation.None
})
export class ReportsComponent implements OnInit {

  reportSections: any;
  constructor( private relevantReportService: RelevantReportService,
               private router: Router,
               private activatedRoute : ActivatedRoute

             ) { }

  ngOnInit() {
   ...

    console.log(this.activatedRoute.queryParams.value.reportName)
    // console.log(this.activatedRoute.queryParams._value.reportName)
  }
...

}

当我执行console.log(this.activatedRoute.queryParams.value.reportName) 时，控制台会吐出查询参数（这正是我想要的）但是它也说

“‘Observable’类型上不存在属性‘值’”

所以我认为这不是解决问题的正确方法。

【问题讨论】：

标签： javascript angular typescript routing query-parameters

【解决方案1】：

它是可观察的，以便能够监视参数的变化（通过订阅可观察的）。要获取当前传递的查询参数，请使用：

this.activatedRoute.snapshot.queryParams

您也可以使用ActivatedRouteSnapshot 代替ActivatedRoute

【讨论】：

谢谢，这正是我想要的。您能否向我解释一下“快照”是什么？
这是最初传递给激活路由的参数的静态图片。
请注意，如果您使用快照，如果页面使用不同的查询参数重新显示，您将不会收到通知。
我会使用生命周期挂钩来确保它确实得到通知吗？
如果您需要在参数更改时收到通知，您应该使用常规的ActivatedRoute 并根据您的需要订阅 queryParams 或 params。

【解决方案2】：

这并不奇怪！ activateRoute.queryParams 是一个 observable，因此您需要按照https://angular.io/api/router/ActivatedRoute#queryParams 订阅它

您需要执行以下操作：

ngOnInit() {
    this.activatedRoute.queryParams.subscribe(values => {
      console.log(values);//Which will print the properties you have passed
    });
  }

【讨论】：

打印属性不是我想要的，我想获取查询参数：/
好吧，你可以对变量值做任何你想做的事情。打印它只是为了看看里面有什么！
我已经完成了，但不幸的是我没有看到查询参数...我不确定它是否在那里或者它是否被埋得很深
@its.david 你只需要用“queryParams”交换“params”就可以了。它们都是可观察的。我在这里更改了示例代码，以反映 OP 想要什么（目前正在等待审核）。

【解决方案3】：

对于 Angular5，我会说最好的选择是使用 URL 树。由于路由器状态是一棵树，而 URL 只不过是一个序列化状态，因此 URL 是一个序列化树。 UrlTree 是一种数据结构，在处理 URL 方面提供了很多启示

详情 https://angular.io/api/router/UrlTree

【讨论】：