如何在Angular中拆分URL并分别提取路径与查询参数值

Angular框架提供了官方路由工具类，可以直接解析路由信息，不需要手动写正则拆分字符串，分两种常见使用场景：

场景1：提取当前激活页面的路由信息 #

这是最常用的场景，直接用ActivatedRoute获取当前页面的路由数据即可：

1. 首先从@angular/router导入依赖并注入组件

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

@Component({
  // 组件配置省略
})
export class YourComponent {
  constructor(private route: ActivatedRoute) {}
}

2. 提取所需信息
   如果路由不会动态变化，直接用快照（snapshot）获取即可：

ngOnInit(): void {
  // 提取路径部分 tab/event/eventcard
  const path = this.route.snapshot.url.map(segment => segment.path).join('/');
  console.log(path); // 输出 tab/event/eventcard

  // 提取查询参数id的值
  const id = this.route.snapshot.queryParamMap.get('id');
  console.log(id); // 输出 recV364lxjTat9lBQ
}

如果路由参数会动态更新（比如同组件路由跳转参数变化），用订阅方式获取最新值：

ngOnInit(): void {
  // 订阅路径变化
  this.route.url.subscribe(segments => {
    const path = segments.map(s => s.path).join('/');
    // 处理逻辑
  })

  // 订阅查询参数变化
  this.route.queryParamMap.subscribe(params => {
    const id = params.get('id');
    // 处理逻辑
  })
}

场景2：提取任意给定URL字符串的信息 #

如果要解析的不是当前页面的路由，而是一个单独的URL字符串，用UrlSerializer工具解析：

1. 导入依赖并注入

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

@Component({
  // 组件配置省略
})
export class YourComponent {
  constructor(private urlSerializer: UrlSerializer) {}
}

2. 解析URL

const rawUrl = 'http://localhost:4200/tab/event/eventcard?id=recV364lxjTat9lBQ';
// 去掉域名前缀，拿到相对路径
const relativeUrl = rawUrl.replace(window.location.origin, '');
const parsedUrl = this.urlSerializer.parse(relativeUrl);

// 提取路径
const path = parsedUrl.root.children['primary'].segments.map(s => s.path).join('/');
console.log(path); // 输出 tab/event/eventcard

// 提取id参数
const id = parsedUrl.queryParamMap.get('id');
console.log(id); // 输出 recV364lxjTat9lBQ

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