如何优雅获取URL中当前named outlet的对应名称

两种简洁实现方案 #

方案1：正则直接解析（无框架依赖，最轻量） #

直接通过正则匹配URL中命名outlet的格式规则提取值，代码如下：

const targetUrl = 'http://localhost:6002/S8R4oL_nDk8-/a0_ksrURM10-/inspections/list/(inspection:bulk-assign)';
// 捕获组直接匹配冒号后、右括号前的内容
const outletName = targetUrl.match(/\(.*?:([^)]+)\)/)?.[1];
// 输出结果：bulk-assign

如果URL存在多个命名outlet，把match替换为matchAll遍历所有捕获结果即可。

方案2：Angular Router原生API提取（项目内用更规范） #

如果是在Angular项目中使用，不需要手动解析字符串，直接调用框架内置路由解析方法即可：

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

constructor(private router: Router) {}

fetchOutletValue(outletKey: string) {
  const urlTree = this.router.parseUrl(this.router.url);
  return urlTree.root.children[outletKey]?.segments.map(seg => seg.path).join('/');
}

// 调用示例：传入outlet名inspection，直接返回bulk-assign

该方案支持多outlet场景，不需要监听路由事件或遍历激活路由树，比旧版本的实现逻辑简洁很多。

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