为什么路由器 link 不工作，尽管我使用与 href 相同的 link 组件并且它工作？

Question

我在开发 angular 7 个应用程序，我的问题是使用 routerLink 时路由无法正常工作但它在使用 href 时有效。

我让 href link 有参数值 report id

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

结果工作路由

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

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

<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},
      ]},

如何解决问题？

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

第一个线程的结果如下：

您为路由所做的结果代码是

localhost:4200/pages/report/reportdetails/3

但我需要它，因为

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

所以我改变了什么

Answer 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

为什么路由器 link 不工作，尽管我使用与 href 相同的 link 组件并且它工作？

why router link not work although I use same link to component as href and it work?

javascript

typescript

angular-material

angular-components

angular7-router