CODEWITHSUNDEEP
angularangular2-routing
GrKoV
GrKoV

Reputation: 31

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 =)

Upvotes: 2

Views: 4155

Answers (2)

Shaishab Roy
Shaishab Roy

Reputation: 16805

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 a 1996 proposal by the founder of the web, Tim Berners-Lee.

Although matrix notation never made it into the HTML standard, it is legal and it became popular among browser routing systems as a way to isolate parameters belonging to parent and child routes. The Angular Component Router is such a system.

The syntax may seem strange to us but users are unlikely to notice or care as long as the URL can be emailed and pasted into a browser address bar as this one can.

how identify parent and child route? for child route used /... for example say in your app.component file

@RouteConfig([

  { // Crisis Center child route
    path: '/crisis-center/...',
    name: 'CrisisCenter',
    component: CrisisCenterComponent,
    useAsDefault: true
  },
  // here heroes is parent/ route route
  {path: '/heroes',   name: 'Heroes',     component: HeroListComponent}
])

See this example got to crisis center details and click on Cancel and go to heros details and click on Back to show different url

N.B: plunker view pop out the preview window by clicking the blue 'X' button in the upper right corner.

Upvotes: 2

kemsky
kemsky

Reputation: 15261

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 does not capture parameter:

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

Also useAsDefault adds its bits:

If true, the child route will be navigated to if no child route is specified during the navigation.

i bet navigation changes that you see are caused by this parameter. It is difficult to say how exactly it works without debugging.

Upvotes: 4

Related Questions