Angular中RouterLink传递userId参数失败问题求助

我一眼就发现了问题的关键——你在模板的routerLink里错误地使用了this.userId，Angular模板中访问组件类的属性是不需要加this关键字的！

核心错误点 #

在Angular的模板上下文里，直接引用组件的属性时，只需要写属性名称即可，不需要像组件类内部那样加this.前缀。你当前的写法[routerLink]=" ['/browse/book/',this.userId,'/content/', b.id]"中，this.userId是无效的，模板无法解析这个值，导致路由跳转失败，最终触发了默认的首页路由跳转。

修正方案 #

把routerLink里的this.userId改成userId即可，修正后的代码如下：

<button class="btn btn-primary" [routerLink]=" ['/browse/book/', userId,'/content/', b.id]" style="width: 75px">Read </button>

额外验证 #

你的路由配置{path: 'browse/book/:id/content/:bookId', component: Book_contentComponent, resolve: {book: BookContentResolver}}是完全匹配跳转结构的：:id会接收userId的值，:bookId接收b.id的值，和你硬编码的['/browse/book/26/content/', b.id]结构一致，所以修正后就能正常跳转了。

另外你已经通过console.log(this.userId)确认了userId有正确值（26），所以只要去掉模板里的this.前缀，问题就能解决。

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