Angular 5中routerLink在DevTools不显示完整真实路径：是Bug还是规范？

别担心，你遇到的这个现象完全是正常的，不是Angular的Bug，而是它在开发模式下为调试添加的设计特性。

为什么ng-reflect-router-link只显示部分路径？ #

• ng-reflect-*系列属性是Angular在开发模式下自动添加的调试属性，它的作用是展示你在模板中写的原始绑定表达式，而不是解析渲染后的最终结果。
• 你用的是插值表达式：<button routerLink="/account/order/{{this.orderService.order._id}}/messages">Messages</button>，所以ng-reflect-router-link会直接显示这个带{{}}的原始字符串，而不是替换掉_id后的完整URL。这完全符合它的设计目的——让你能快速看到模板里写的绑定内容是什么。

验证绑定有效性的正确方式 #

既然你的路由跳转功能完全正常，能正确跳转到/account/order/5aaaa0c6fd204609b3bd2577/messages，这就说明routerLink的绑定是完全有效的，不用纠结ng-reflect属性的显示内容。

可选优化：改用数组形式绑定routerLink #

如果希望ng-reflect-router-link能更清晰地展示绑定的各个部分，你可以改用Angular推荐的数组形式绑定routerLink：

<button [routerLink]="['/account/order', this.orderService.order._id, 'messages']">Messages</button>

这时候ng-reflect-router-link会显示["/account/order", "5aaaa0c6fd204609b3bd2577", "messages"]，能直观看到每个路径段的绑定值，调试起来更方便。

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