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

Question

I work on angular 7 app my issue is routing not working when use routerLink but it work when use href .

I make href link have parameter value report id

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

result working routing

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

when use router link in same place of href i do as below :

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

result not working routing as url generated below

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

app routing module :

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

How to solve issue ?

I need router link make routing exactly same as href ?

Result of first thread as below :

result code you do for routing is

localhost:4200/pages/report/reportdetails/3 

but i need it as

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

so what i change

Answer 1

You passing the property subrep.reportID as a string , that why it navigate to the result you see. Try this:

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

If you want to add id as a query params, the syntax for it is [queryParams]="{queryparam: value}":

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

You can read more about RouterLink APIs here