获取 Angular 中的任何 URL 参数

Posted 2023-02-22

【中文标题】获取 Angular 中的任何 URL 参数

【英文标题】：Get any URL parameter in Angular

【发布时间】：2020-01-12 10:29:20

【问题描述】：

在 php 中，您将获得所有 URL 参数

print_r($_GET);

在 javascript 中是这样的

window.onload = function() 
  GetURLParameter();
;

function GetURLParameter()

    var sPageURL = window.location.search.substring(1);
    var sURLVariables = sPageURL.split('&');
    for (var i = 0; i < sURLVariables.length; i++) 
    
        var sParameterName = sURLVariables[i].split('=');
        var oldValue = document.getElementById("result").value;
        var newValue = oldValue + '\n' + sParameterName[0] + ': ' + sParameterName[1];
        document.getElementById("result").value = newValue;
    
​

在 Angular 中？

我看到的所有示例都查询某个参数。您必须提前知道参数。例如

import  Component, OnInit  from '@angular/core';
import  Router, ActivatedRoute, Params  from '@angular/router';

@Component(
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
)
export class AppComponent implements OnInit 
  title = 'url-call';
  paramList: string[] = [];
  param1: string;

  constructor(private activatedRoute: ActivatedRoute)  

  ngOnInit() 
    console.log(this.activatedRoute.snapshot.queryParamMap.get("param1"));
    this.activatedRoute.queryParamMap.subscribe(queryParams => 
      console.log(queryParams.get("param1"));
    )

  

如何在不知道参数名称的情况下打印出所有/任何参数？

另外queryParamMap和queryParams有什么区别？

【参考方案1】：

如果您想将所有参数作为一个对象获取，您可以这样做

this.route.queryParamMap.subscribe(params => 
  this.orderObj = ...params.keys, ...params;
);

如果你的网址是这样的

http://localhost:4200/products?order=popular&filter=new

this.orderObj 将包含

  "0": "order",
  "1": "filter",
  "params": 
    "order": "popular",
    "filter": "new"
  

更新：

queryParamMap：可观察： 一个 Observable，包含所有路由可用的查询参数的映射。该地图支持从查询参数中检索单个和多个值。

同时

queryParams：可观察的 所有路由共享的查询参数的 observable。

请查看link

【讨论】：

如何打印出orderObj？这行代码使...params.keys, ...params 做什么？

TypeScript 中有一个叫做 Object Rest and Spread 的东西。请参考alligator.io/typescript/object-rest-spread 了解更多信息。