如何从Angular字符串形式的查询串中读取参数（非ActivatedRoute场景）

我需要从字符串形式的URL查询串中读取参数（不使用ActivatedRoute），示例URL如下：

http://localhost:4200/users?param1=en&param2=nk

我尝试了以下代码，但返回的是空对象：

constructor(private router: Router){}
let srcStr = 'http://localhost:4200/users?param1=en&param2=nk';
const tree: UrlTree = this.router.parseUrl(srcStr);
console.log('params = ', tree.queryParams);

请问有没有其他实现方式？

另外，下面这段代码能得到正确结果：

const srcStr = 'http://localhost:4200/users?param1=en&param2=nk';
const tree: UrlTree = this.router.parseUrl(srcStr);
const params = tree.queryParams;
console.log('param1=', params['param1']); // 输出 'en'
console.log('param2=', params['param2']); // 输出 'nk'

可行解决方案 #

1. 修正Angular Router的使用方式 #

你提供的第二段代码是有效的，第一段代码返回空对象的核心问题是执行时机不对：直接在类的顶级作用域调用router.parseUrl时，Router服务还未完成初始化，导致解析失败。将代码移到组件的生命周期钩子（如ngOnInit）中即可正常获取参数：

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements OnInit {
  constructor(private router: Router) {}

  ngOnInit(): void {
    const srcStr = 'http://localhost:4200/users?param1=en&param2=nk';
    const tree: UrlTree = this.router.parseUrl(srcStr);
    console.log('params = ', tree.queryParams); // 正常输出 {param1: "en", param2: "nk"}
  }
}

2. 使用原生URL API（无需依赖Angular Router） #

如果不想依赖Angular的Router服务，可直接使用浏览器原生的URL对象解析查询参数，这种方法更轻量，适合在工具函数等非组件环境中使用：

const srcStr = 'http://localhost:4200/users?param1=en&param2=nk';
const url = new URL(srcStr);
const param1 = url.searchParams.get('param1'); // 得到 'en'
const param2 = url.searchParams.get('param2'); // 得到 'nk'

console.log('param1=', param1);
console.log('param2=', param2);

内容的提问来源于stack exchange，提问作者alexmntmnk