Question

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

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

我的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)时，控制台会吐出查询文件（这正是我想要的） HOWEVER 它也说

“Observable”类型中不存在“属性'值'”

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

Answer 1

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

this.activatedRoute.snapshot.queryParams

您也可以使用ActivatedRouteSnapshot代替ActivatedRoute

Answer 2

那里没什么好吃的！ activatedRoute.queryParams是一个可观察的，因此您需要按照https://angular.io/api/router/ActivatedRoute#queryParams订阅它

您需要执行以下操作：

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

Answer 3

对于Angular5，我会说最好的选择是使用URL树。由于路由器状态是树，并且URL只是序列化状态，因此URL是序列化树。 UrlTree是一种数据结构，在处理URL时提供了很多支持

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

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

3 个答案: