Handle Routes with QueryParam in Angular2

Question

I have two routes in my appilcation

{path: 'activity/?cInfo=askjdfkajsdfkasd', component: PostComponent},
{path: 'activity/:id', component: PostDetailComponent}

What i have to do to make them work?

Route with querystring ?cInfo=askjdfkajsdfkasd should go to PostComponent

and Route like activity/skjdfhakjdfhaajsdf should go to PostDetailComponent

i tried

{path: 'activity/?cInfo=askjdfkajsdfkasd', component: PostComponent,canActivate:[CheckForListPage],pathMatch:'full'},
{path: 'activity/:id', component: PostDetailComponent,canActivate:[CheckForDetailPage]}

but each time 1 is called. The guards are returning boolean.

Does angular differentiate between queryParams and pathVariables like most MVC do?

Gonzalo Bahamondez · Accepted Answer · 2017-02-10 17:44:22Z

2

I think you must declare your routes in this way.

{path: '/activity', component: PostComponent,canActivate:[CheckForListPage]},
{path: '/activity/:id', component: PostDetailComponent,canActivate:[CheckForDetailPage]}

So, when you navigate to /activity?cInfo=askjdfkajsdfkasd the router will match with the first defined route (/activity), and then you can retrieve the queryParameters passed to the route inside the component (PostComponent).

ngOnInit(): void {
    this.route.queryParams
        .subscribe(params => {
          // complete params object
          console.log(params);

          // your param passed 
          console.log(params['cInfo'])
        });
}

Of course you need import @angular/route ActivatedRoute

import { ActivatedRoute } from '@angular/router';

And set route in your constructor as a property of type ActivatedRoute before the first code snippet (which should be in ngOnInit method of your component class, which means your component class must implements OnInit from @angular/core).

constructor(
    private route     : ActivatedRoute
){}

answered Feb 10, 2017 at 17:44

Gonzalo Bahamondez

1,3711 gold badge17 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dinkar Thakur Over a year ago

any idea how to handle case senstivity?

Gonzalo Bahamondez Over a year ago

@DinkarThakur What you mean exactly ? Something like this? stackoverflow.com/questions/36154672/…

Collectives™ on Stack Overflow

Handle Routes with QueryParam in Angular2

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related