Angular中如何正常跳转含括号特殊字符的链接

带括号的链接跳转失败，核心是(和)属于URL规范里的保留字符，未做编码直接绑定到href属性时，浏览器、Angular路由或后端服务会优先把括号识别为路径语法标记（比如参数包裹符、路由规则通配符），不会当成普通路径字符解析，最终导致URL被截断、跳转地址错误。
另外原代码里写的[disabled]="item.disable"对a标签完全无效：disabled是表单元素的原生属性，a标签不支持该属性，无法实现禁用效果。

• 第一步：对URL中的特殊字符做编码转义
  原生encodeURI方法默认不会转义括号，需要单独把括号替换为对应的URL编码值（(对应%28，)对应%29），可以选择在组件中写处理方法，或者封装全局管道复用：

  // 组件内快速实现的处理方法
  sanitizeHref(url: string): string {
    if (!url) return '';
    return encodeURI(url)
      .replace(/\(/g, '%28')
      .replace(/\)/g, '%29');
  }
  

  如果项目里多处需要处理这类URL，建议封装成全局管道：

  import { Pipe, PipeTransform } from '@angular/core';
  @Pipe({ name: 'safeHref', standalone: true })
  export class SafeHrefPipe implements PipeTransform {
    transform(url: string): string {
      if (!url) return '';
      return encodeURI(url).replace(/\(/g, '%28').replace(/\)/g, '%29');
    }
  }
  

• 第二步：修正a标签模板代码
  替换无效的disabled属性实现，绑定编码后的URL：

  <a 
    target="_self"
    *ngIf="item.url"
    [class.disabled]="item.disable"
    [style.pointer-events]="item.disable ? 'none' : 'auto'"
    [href]="item.url | safeHref"
    <!-- 用组件方法的话写[href]="sanitizeHref(item.url)" -->
  >
    <!-- 锚点文本，比如{{ item.label }} -->
  </a>
  

  禁用逻辑通过class控制灰化样式，配合pointer-events: none阻止点击，替代不生效的disabled属性。

• 站内路由场景优化
  如果跳转的是Angular应用内地址，不要用原生href绑定，优先用[routerLink]配合[queryParams]绑定，或用Router.navigate()方法做代码跳转，框架会自动处理路径参数里的特殊字符，减少手动编码的遗漏。

修复后打开浏览器开发者工具，在Elements面板查看渲染完成的a标签href属性，类似M(16)a的字段会被转义为M%2816%29a，此时跳转即可正常命中目标地址。

注意：不要直接用DomSanitizer.bypassSecurityTrustUrl跳过安全校验，除非你完全信任所有URL的来源，否则会引入XSS风险，编码转义是最安全的兼容方案。

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