如何在Angular中提取URL中的路由参数与查询字符串？

实现步骤 #

• 1. 导入依赖
  在组件文件顶部导入Angular路由的ActivatedRoute服务：

  import { ActivatedRoute } from '@angular/router';
  

• 2. 注入服务
  在组件构造函数中注入ActivatedRoute，用于获取路由相关数据：

  constructor(private route: ActivatedRoute) { }
  

• 3. 提取并合并参数
  有两种常用方式获取参数，可根据场景选择：

  快照获取（适合组件初始化时一次性获取）

  直接通过路由快照读取参数并合并成目标对象：

  ngOnInit(): void {
    // 提取路由参数
    const chapterId = this.route.snapshot.paramMap.get('chapterId');
    const sectionId = this.route.snapshot.paramMap.get('sectionId');
    // 提取查询字符串参数
    const search = this.route.snapshot.queryParamMap.get('search');
  
    // 合并为目标格式
    const result = {
      chapterId,
      sectionId,
      search
    };
    console.log(result); // 输出 {chapterId:'1', sectionId:'2', search:'moby'}
  }
  

  订阅监听（适合参数动态变化的场景，如同一组件复用）

  通过订阅参数变化，实时获取最新的路由参数与查询字符串：

  ngOnInit(): void {
    // 监听路由参数变化
    this.route.paramMap.subscribe(paramMap => {
      const chapterId = paramMap.get('chapterId');
      const sectionId = paramMap.get('sectionId');
      // 同时获取查询参数，若查询参数也会动态变化，可单独订阅queryParamMap
      const search = this.route.snapshot.queryParamMap.get('search');
      
      const result = { chapterId, sectionId, search };
      console.log(result);
    });
  }
  

补充说明 #

• paramMap和queryParamMap是Angular官方推荐的参数获取方式，返回类型为string | null，若需确保非空可添加空值处理逻辑。
• 若想快速合并所有参数，可使用对象展开语法：

  const routeParams = Object.fromEntries(this.route.snapshot.paramMap);
  const queryParams = Object.fromEntries(this.route.snapshot.queryParamMap);
  const result = { ...routeParams, ...queryParams };
  

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