CODEWITHSUNDEEP
angularangular2-routing
FX_Sektor
FX_Sektor

Reputation: 1460

Need to get the params from route in Angular 7 Router

I have a problem with my params in my router.

{
  path: 'profile',
  component: ProfileComponent,
  canActivate:[AuthGuard],
  children: [
    {
      path: 'section/:id/:idarticle',
      component: WriteArticleComponent,
    },
  ]
}

It is working okay. My page is opening as it should.

I formed link to this component in this case

<a [routerLink]="['/profile/section', item.idSection, item.id]">

And in browser url I have this

http://localhost:59955/profile/section/7002/5005

But in this page I need to get the params from route. And I can get only the first

this.idSection = this.router.snapshot.params.id;
this.idArticle = this.router.params['id-article'];

Second will always undefined

I tried to form my url by this way

<a [routerLink]="['/profile/section/']" [queryParams]="{id: 
item.idSection, article: item.id}">

And I have this in browser 

http://localhost:59955/profile/section?id=7002?idarticle=5005

And this router is not working. Link will no redirect there. If I try to force there in browser. Its redirected me to 

http://localhost:59955/profile/section

How can I organize my work with router and link, where I can easy get all the params.

Upvotes: 3

Views: 239

Answers (2)

jitender
jitender

Reputation: 10429

You can get params with first approch something like

this.router.params.subscribe(data=>{
  this.idArticle=data['idarticle'];
  this.idSection =data['id'];
});

In case of second approch you will need to change path: 'section/:id/:idarticle', to path: 'section', and then get queryparams like

this.router.queryParams.subscribe(data=>{
  this.idArticle=data['idarticle'];
  this.idSection =data['id'];
});

Upvotes: 1

jSebesty&#233;n
jSebesty&#233;n

Reputation: 1806

You retrieve the first parameter via snapshot

this.idSection = this.router.snapshot.params.id;

and the second directly via parameters

this.idArticle = this.router.params['id-article'];

The latter does not return the given parameter, but an Observable containing said parameter. On the other hand when calling router.snapshot a snapshot is created that contains the values of the parameters at that point of time.

Thus you can either use the snapshot as well (if you know that your params will not change) or you should use the observable for both parameters and react to changes that might occur.

Upvotes: 2

Related Questions