Angular2 : How to get query params in matrix notation

Question

my url is :

http://localhost/#/foo;nb=25;page=1

in the component linked to this url, I do :

ngOnInit() {
        this.queryParamSub = this._route.queryParams.subscribe(queryParams => {
           console.log(queryParams)
        })
}

However, I keep getting an empty object as queryParams. I did try with my url as : http://localhost/#/foo?nb=25&page=1 and it worked fine. Any idea how can I solve this issue if I want to use the matrix notation ?

EDIT this._route is ActivatedRoute

EDIT Here is my app-routing.module.ts

@NgModule({
    imports: [
        RouterModule.forChild([
            {
                path: "",
                component: AppComponent,
                children: [
                    {
                      path: "foo",
                      component: HomepageComponent,
                      data: {
                          name: 'home'
                      }
                    }
                ]
            }]
        )
    ],
    exports: [
        RouterModule
    ]
})

export class AppRoutingModule {}

The component in which I try to get the query param is HomepageComponent

Günter Zöchbauer · Accepted Answer · 2016-11-23 13:30:19Z

2

Query parameters on the root route are serialized as query parameters ?xxx=yyy, query parameters on child routes are serialized as matrix parameters ;xxx=yyy.

So what you need to do is to add the parameters to a child route segment to get them in matrix notation.

answered Nov 23, 2016 at 13:30

Günter Zöchbauer

662k235 gold badges2.1k silver badges1.6k bronze badges

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

6 Comments

Scipion Over a year ago

Sorry mate but I am afraid I don't see what you mean by "add them to a child route segment" ...

Günter Zöchbauer Over a year ago

If you have a route { path: 'root', children: [{ path: 'child', component: Child}]} and this.router.navigate(['/root', {nb:25}, 'child', {page:1}]) you should get http://localhost/#/root/child;page=1?nb=25 (at the end of angular.io/docs/ts/latest/guide/…)

Günter Zöchbauer Over a year ago

Sorry, it seems I misinterpreted your question a bit. In addition to my answer which explains when matrix parameters are used, you need to apply the _route.queryParams.subscribe() at the right component, the one that was added by the route where the matrix parameters belong to. I don't know if the URL you posed is actually valid. Was this URL created from Angular by the router or did you invent it?

Günter Zöchbauer Over a year ago

Can you please provide the routes configuration you're using?

Günter Zöchbauer Over a year ago

Seems I am subject to some confusion here myself. I assumed optional route parameters are queryParameters, but it seems they are something different. This is also why they are passed within the array ['/root', {...}] and not in routingExtras that also allows to pass queryParameters but only in addition to the entire route not to segments.

|

Collectives™ on Stack Overflow

Angular2 : How to get query params in matrix notation

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related