How to get query parameters? Angular2

I want to use a variable “?search=value” in my child component.

Root component config:

@RouteConfig([
    { path: '...', name: 'Project', component: ProjectComponent, useAsDefault: true}
])
class App {}

Child component config:

@RouteConfig([
    { path: '/', name: 'List', component: ProjectListComponent, useAsDefault: true }
])
export class ProjectComponent{
    constructor(
        private _routeParams: RouteParams
    ){
        console.log(this._routeParams.get('search'))
    }

I open

localhost:3000/?search=example

I see (itself changes)

http://localhost:3000/;search=example?search=example  // wtf???

and

console.log(this._routeParams.get('search')); // example

I open

http://localhost:3000/;search=example

I see

http://localhost:3000/

and

console.log(this._routeParams.get('search')); // null - wtf???

Please help =)

2
Leave a Reply

avatar
2 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
Jason Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Jason
Guest

It seems to corner case for the router. ... is non-terminal route mark, it is the same as /..., ProjectComponent always loads during navigation since it matches every url. ProjectListComponent is mapped to / so it is effectively mapped to the same route as ProjectComponent but treated as child route due to inheritance – some kind of collision, both components are on the same url. Parameters start with ; for child routers (matrix parameters) and question mark ? is used for the main router parameters only. Both child and parent routers capture parameters: http://localhost:3000/?search=example Main router expects ? so it… Read more »

Jason
Guest

Angular-2 support Query Parameters but shown in different view in browser address bar. some time shown like as /heroes?id=15&foo=foo and some time shown as /heroes;id=15;foo=foo. You should know when will show /heroes?id=15&foo=foo and when will show /heroes;id=15;foo=foo /heroes?id=15&foo=foo will show in browser url when route is parent route /heroes;id=15;foo=foo will show in browser url when route is child route but from both both url can get id by using routeParams.get() like: constructor(routeParams: RouteParams) { this._selectedId = +routeParams.get('id'); }) when URL separated by semicolons (;) that means this is matrix URL notation Matrix URL notation is an idea first floated in… Read more »