Angular router.navigate 如何使用变量动态设置查询参数的键名

实现方案 #

你写的直接传入{ parameterName: p }的写法无法达到预期，这种写法会将参数键固定为字符串parameterName，不会读取你定义的变量值。

要实现动态设置查询参数的键名，使用ES6的计算属性名语法即可，只需要把变量用方括号包裹作为键名：

// 定义存储参数名的变量
let parameterName = 'supportContractId'

// 路由跳转时使用计算属性
this.router.navigate([alternativeRedirect], { 
  queryParams: { 
    [parameterName]: p 
  }
})

方括号包裹的内容会被JS/TS先执行求值，最终的结果会作为对象的键名，完全满足你动态设置参数名的需求。

如果需要动态拼接多个查询参数，也可以先单独构建queryParams对象再传入，写法更灵活：

const queryParams = {}
queryParams[parameterName] = p
// 还可以继续追加其他动态/固定参数
queryParams['fixedParam'] = 'fixedValue'

this.router.navigate([alternativeRedirect], { queryParams })

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