Angular 16中如何正确序列化UrlTree以支持父路由导航？

针对你遇到的../被序列化为/../的问题，可以通过修改管道逻辑，区分相对路径与绝对路径的处理方式，既保留查询参数的解析能力，又不破坏相对路径的原始格式，同时无需新增输入属性。

1. 修改urlPathParser管道逻辑 #

不再依赖Angular Router的序列化方法，改用字符串分割+原生URL API的组合方式处理，确保../这类相对路径保持原始格式：

@Pipe({
  name: 'urlPathParser',
  standalone: true,
})
export class UrlPathParserPipe implements PipeTransform {
  public transform(value: string): string {
    // 分割路径与查询参数部分
    const [pathPart] = value.split('?');
    
    // 相对路径（以.开头）直接返回原始路径部分
    if (pathPart.startsWith('.') || pathPart.startsWith('../')) {
      return pathPart;
    }
    
    // 绝对路径用原生URL解析提取纯路径
    const url = new URL(value, window.location.origin);
    return url.pathname;
  }
}

2. 保留原queryParams getter #

原有的查询参数解析逻辑无需改动，Angular Router的parseUrl方法依然能正确解析各类URL中的查询参数：

import { Params, Router } from '@angular/router';
import { Component, Input, inject } from '@angular/core';

@Component({
  // 组件元数据
})
export class YourComponent {
  @Input() targetUrl!: string;
  private router = inject(Router);

  public get queryParams(): Params {
    return this.router.parseUrl(this.targetUrl).queryParams;
  }
}

3. 保持原有模板结构 #

模板部分完全不需要改动，依然使用原有的绑定方式：

<a
  [routerLink]="targetUrl | urlPathParser"
  [queryParams]="queryParams"
></a>

方案说明 #

• 对于../这类相对路径，直接返回去掉查询参数的原始字符串，Angular Router会自动识别为相对当前路由的导航，不会将其强制序列化为绝对路径的/../。
• 对于绝对路径（如/或/some/path/with?query=params），通过原生URL API提取纯路径部分，确保查询参数被准确剥离。
• 全程复用原有输入属性与模板结构，无需新增任何绑定项。

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