为啥路由器链接不起作用，尽管我使用与 href 相同的组件链接并且它可以工作？

Posted 2023-03-13

【中文标题】为啥路由器链接不起作用，尽管我使用与 href 相同的组件链接并且它可以工作？

【英文标题】：why router link not work although I use same link to component as href and it work?为什么路由器链接不起作用，尽管我使用与 href 相同的组件链接并且它可以工作？

【发布时间】：2020-09-06 06:15:57

【问题描述】：

我在 Angular 7 应用程序上工作，我的问题是使用 routerLink 时路由不起作用 但是在使用 href 时它可以工作。

我让href链接有参数值report id

<a href="/pages/report/reportdetails?id=subrep.reportID">

结果工作路由

http://localhost:4200/pages/report/reportdetails?id=3

当在 href 的同一位置使用路由器链接时，我会执行以下操作：

<a [routerLink]="['/pages/report/reportdetails/id=,subrep.reportID']"> 

导致下面生成的 url 无法正常路由

http://localhost:4200/pages/report/reportdetails/id%3D,subrep.reportID

应用路由模块：

path:'report',component:ReportcategoryComponent,children:[
      path:'reportdetails',component:ReportdetailsComponent,
      path:'reportdetails/:id',component:ReportdetailsComponent,
      ],

如何解决问题？

我需要路由器链接使路由与 href 完全相同？

第一个线程的结果如下：

你为路由做的结果代码是

localhost:4200/pages/report/reportdetails/3 

但我需要它

localhost:4200/pages/report/reportdetails?id=3

所以我改变了什么

【参考方案1】：

您将属性 subrep.reportID 作为字符串传递，这就是它导航到您看到的结果的原因。试试这个：

<a [routerLink]="['/pages/report/reportdetails', subrep.reportID ]"> 

如果你想添加id作为查询参数，它的语法是[queryParams]="queryparam: value"：

<a [routerLink]="['/pages/report/reportdetails']" [queryParams]="id: subrep.reportID" >

你可以阅读更多关于RouterLink APIs here

【讨论】：

你为路由做的结果代码是localhost:4200/pages/report/reportdetails/3，但我需要它作为localhost:4200/pages/report/reportdetails?id=3所以我改变了什么

@aboelham 这就是所谓的queryParams。这就是您传递查询参数的方式Link

@aboelham 就像sameer Khan 提到的，它叫做查询参数，我用它更新了我的答案

@abo elham 很高兴它有帮助，如果有帮助，请将答案标记为已解决。谢谢