0

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

abo elham
  • 51
  • 1
  • 7

1 Answers1

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

Ethan Vu
  • 2,911
  • 9
  • 25
  • result code you do for routing is http://localhost:4200/pages/report/reportdetails/3 but i need it as http://localhost:4200/pages/report/reportdetails?id=3 so what i change – abo elham May 20 '20 at 02:12
  • 1
    @aboelham That is called as `queryParams`. This is how you pass query params [Link](https://stackoverflow.com/a/37880877/11719787) – Sameer May 20 '20 at 02:32
  • @aboelham like sameer Khan mentioned, it called query params , I updated my answer with it – Ethan Vu May 20 '20 at 02:41
  • @abo elham glad it help, please mark the answer as resolved if it did. Thank you – Ethan Vu May 20 '20 at 04:19