Angular中[queryParams]绑定组件字段的语法问题求助

你这里踩了Angular属性绑定的一个常见小坑——在方括号[]包裹的属性绑定内部，我们已经处于Angular的表达式求值上下文里了，完全不需要再用插值语法{{}}来包裹组件属性。

正确的写法应该是这样： #

<a routerLink="/{{getMyLink()}}" [queryParams]="{ navSource: navSource }" />

直接把组件的navSource属性作为对象的值传入即可，Angular会自动识别并绑定这个属性的当前值（哪怕它是number类型也没问题，框架会自动处理类型转换）。

额外的最佳实践建议： #

其实routerLink也可以改用属性绑定的方式，这样更符合Angular的规范，还能避免插值语法可能带来的变更检测潜在问题：

<a [routerLink]="['/', getMyLink()]" [queryParams]="{ navSource: navSource }" />

这种数组形式的routerLink绑定，Angular会更高效地处理路由路径生成，尤其是当getMyLink()返回的值动态变化时表现更稳定。

为什么原来的写法会出错？ #

当你写[queryParams]="{ navSource: {{navSource}} }"时，相当于在一个已经是表达式的环境里又嵌套了插值语法，Angular会把{{navSource}}当成字符串的一部分解析，而不是组件属性的引用，自然就达不到你想要的绑定效果了。

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