How to get query parameters? Angular2

Question

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

kemsky · Accepted Answer · 2016-04-18 22:03:48Z

4

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.

edited Apr 18, 2016 at 22:03

answered Apr 18, 2016 at 21:55

kemsky

15.4k3 gold badges37 silver badges53 bronze badges

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

2 Comments

GrKoV Over a year ago

I want render lists with help url of parameter, but when I open '/;search=bla' ProjectListComponent this._routeParams.get('search')) have 'null' =(( When I open '/?search=bla' I see '/;search=bla?search=bla' and this._routeParams.get('search')) have 'bla' I want clean url with only '/?search=bla' without '/;search=bla?search=bla'

kemsky Over a year ago

you should assign distinct paths for your components i.e. /project/... for ProjectComponent and /list for ProjectListComponent then you could use matrix parameters /project/list/;search=bla

Shaishab Roy · Accepted Answer · 2016-04-19 14:40:33Z

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.

Collectives™ on Stack Overflow

How to get query parameters? Angular2

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related