如何将Angular中的routerLink正确转换为可使用的href？

代码报错的核心问题 #

两个硬性问题导致代码无法正常运行：

• 模板绑定的表达式存在语法错误：[href] 内的绑定内容会被当作合法JS表达式执行，你编写的'/pick'+id:sizzle.parameter+type:food完全不符合JS字符串拼接规则——id:xxx、type:xxx是对象字面量的键值写法，不能直接嵌套在字符串拼接链路中，从根源上就会触发Angular模板解析报错。
• 参数映射规则和原routerLink逻辑不匹配：原有路由写法[routerLink]="['/pick',{id:sizzle.parameter,type:food}]"会被Angular自动解析为「基础路径/pick + 对应查询参数」，最终生成的完整路径为/pick?id=xxx&type=xxx，自行拼接时如果不遵循这个格式组装，就算语法不报错，最终生成的href也会和预期的路由路径不匹配。

正确实现方式 #

方案1（推荐，无拼接偏差） #

直接复用Angular路由的原生路径生成逻辑，从根源避免手写字符串和路由规则脱节：

1. 在组件类中注入Router实例，提前生成对应跳转路径：

import { Component, Router } from '@angular/core';

@Component({/* 原有组件配置 */})
export class YourComponent {
  // 你原有的组件属性
  sizzle = { parameter: '' };
  food = '';

  constructor(private router: Router) {}

  // 生成和原routerLink完全一致的href地址
  get jumpTargetHref() {
    return this.router.serializeUrl(
      this.router.createUrlTree(['/pick', { id: this.sizzle.parameter, type: this.food }])
    );
  }
}

2. 模板中直接绑定预先生成的href值即可：

<a [href]="jumpTargetHref">跳转</a>

这种写法会完全沿用原routerLink的参数序列化规则，自动处理路由baseHref配置、特殊字符编码等逻辑，不会出现路径偏移问题。

方案2（模板内简单拼接，适合无复杂参数的场景） #

如果不需要处理复杂的路由配置、参数转义，可以直接在模板中编写合法的JS拼接表达式：

<a [href]="'/pick?id=' + sizzle.parameter + '&type=' + food">跳转</a>

注意：如果参数值存在中文、特殊符号，需要手动对参数做URI编码，否则可能出现路径解析异常。

实用提醒：原生href跳转Angular内部路由时会触发整页刷新，如果没有特殊的跳转需求，优先保留原routerLink写法以获得无刷新跳转的体验。

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