Angular2: router not populating params

Question

So, I am loosing my mind over this

I have a page with many components... but for some reason I am having problems with one...

it is for mains search in the header of the page... for debugging purposes I stripped it down to bare minimum, and still doesn't work

This is my search component

import { Component, OnInit }    from '@angular/core';

import { ROUTER_DIRECTIVES }    from '@angular/router';
import { Router, ActivatedRoute } from '@angular/router';


@Component({
    selector: 'main-search',
    template: `<div></div>`,
})

export class MainSearch implements OnInit {
    private sub: any;
    constructor(private route: ActivatedRoute){

    }

    ngOnInit(){

        this.sub = this.route.params.subscribe(params => {
            console.log('PARAMS FROM MAIN SEARCH', params);

        });
    }

}

as you can see, I am trying to log the params from the URL (f.e. http://localhost:8080/indices;search=test)

NOT populating

I have a similar component with exact behaviour (subscribing to params onInit...

this.sub = this.route.params.subscribe(params => {
    console.log('PARAMS FROM INDICES: ', params);
})

And that one actually logs the bloody params!

From console:

PARAMS FROM MAIN SEARCH Object {} => main-search.ts?8502:24
Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode.   => lang.js?c27c:360
null => index.service.ts?0bf5:40
FROM API => index.service.ts?0bf5:49
PARAMS FROM INDICES:  Object {search: "test"} => indicesList.component.ts?5ff1:63

The weird thing is that only the mainsearch gets logged to the console before Angular2 disclaimer

What could be the issue that main-search doesn't get the params?

Is main-search is routed using a path or a static component and app? — Arpit Agarwal
it is weird that your main search log is before angular disclaimer. If both the component is similar and one is not working then probably they are routed / included in some different ways. Can you also post the code where these are added in parent component or/and routing code? — saurabh
Both are added the same way with import... both the same exact way, as a component on a common page... actually there is one more (breadcrumbs) that gets the params populated normally... :'( — DS_web_developer
I've been having some major issues with the router, and I'd be curious to see if you find a solution to this problem. One of my issues is that I have a parent route with a couple children, and I need to add params to the route. The parent route can't see the params at all, it just gives me an empty object. When I do subscribe on this.route.params, it never fires. If I subscribe to this.route.url and change the params, the subscription fires, but the passed value doesn't contain the whole route or any of the params... it's very frustrating! — MrOBrian

Filip Lauc Filip Lauc · Accepted Answer · 2016-07-21T11:58:19

I think you need to use the ActivatedRoute.

This should work in your case:

constuctor(
    private _activatedRoute: ActivatedRoute,
) {}

ngOnInit() 
    this._activatedRoute.params.subscribe(params => console.log(params));
}

The thing is your 'main-search' is a few components deep and the router params observable emits params from the root url. Whereas the ActivatedRoute emits params from the current route.

Angular2: router not populating params

1 Answers