32

I am trying to migrate from rc1 to rc4 and i have trouble getting query string parameters. ActivatedRoute object always empty.

hero.component.ts

import {Component, OnInit} from "@angular/core"; import {Control} from "@angular/common"; import {ROUTER_DIRECTIVES, ActivatedRoute} from '@angular/router'; @Component({ template: '../partials/main.html', directives: [ROUTER_DIRECTIVES] }) export class HeroComponent implements OnInit { constructor(private _activatedRoute: activatedRoute) { } ngOnInit() { this._activatedRoute.params.subscribe(params => { console.log(params); }); } }

main.ts

import {bootstrap} from '@angular/platform-browser-dynamic'; import {HTTP_PROVIDERS, RequestOptions, Http} from '@angular/http'; import {AppRouterProviders} from './app.routes'; bootstrap(AppComponent, [ AppRouterProviders, HTTP_PROVIDERS ]);

app.component.ts

import {Component, OnInit} from '@angular/core'; import {HeroComponent} from './hero.component'; import {RouteConfig, Router, ROUTER_DIRECTIVES} from '@angular/router'; @Component({ selector: 'my-app', templateUrl: '../partials/main.html', directives: [ HeroComponent, ROUTER_DIRECTIVES ] }) export class AppComponent { }

partials/main.html

<a class="nav-link" [routerLink]="['/']" [queryParams]="{st: 'new'}">New</a>

app.routes.ts

import {provideRouter, RouterConfig} from '@angular/router'; import {HeroComponent} from './hero.component'; import {ErrorComponent} from './error.component'; const routes: RouterConfig = [ {path:'', component: HeroComponent}, {path:'**', component: ErrorComponent} ]; export const AppRouterProviders = [ provideRouter(routes) ];

When i click on link 'New' console prints out empty object

Object {}

Updated

plunker

Improve this question

4 Answers 4

Reset to default
74
+50

update (2.0.0 final)

(somepath/:someparam/someotherpath) you can subscribe to them using _router.queryParams.subscribe(...):

export class HeroComponent implements OnInit { constructor(private _activatedRoute: ActivatedRoute, private _router:Router) { _activatedRoute.queryParams.subscribe( params => console.log('queryParams', params['st']));

original

If you want queryParams instead of route params (somepath/:someparam/someotherpath) you can subscribe to them using _router.routerState.queryParams.subscribe(...):

export class HeroComponent implements OnInit { constructor(private _activatedRoute: ActivatedRoute, private _router:Router) { _router.routerState.queryParams.subscribe( params => console.log('queryParams', params['st']));

Plunker example

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

9 Comments

I like your answer and it works as expected, but you maybe know why did I get empty ActivatedRoute object in my plunker example? Just curious.
I don't understand your question. What do you mean with "empty"? ActivatedRoute is passed in, otherwise .params.subscribe() would throw.
The ActivatedRoute itself should contain query params about activated component but i get empty object when I subscribe . Dont know how to clarify better.
But there is no parameter on initial load. You Plunker doesn't use params at all. The New link uses queryParams but that is only passed after the link is clicked.
It seems RouterState does no longer have a property queryParams angular.io/docs/ts/latest/api/router/index/…
|
9

I was struggling with the same problem for a long time. The answer is tricky, in the documentation it was stated:

ActivatedRoute: A service that is provided to each route component that contains route specific information such as route parameters, static data, resolve data, global query params, and the global fragment. This is mentioned in here

The trick answer is 'route component', that means ActivatedRoute will work only on components that are routed. In other words only components described in the routing table.

> Reading the obfuscating official documentation here. It mentions 'route associated with a component loaded in an outlet'. We can only guess what is an outlet...

I wrote a little investigative code to research this problem in stand alone app.module.ts:

import { Component, NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { RouterModule, Routes, ActivatedRoute } from '@angular/router'; @Component({ selector: 'comp1', template: `<h4>comp1 works</h4>`, }) export class Comp1 { } @Component({ selector: 'comp2', template: `<h4>comp2 works</h4>`, }) export class Comp2 { } @Component({ selector: 'fail', template: `<div>Wrong URL:{{url | json}}</div> <h4>Failure page works</h4>`, }) export class Fail { private url: any; constructor(public activeRoute: ActivatedRoute) { this.url = activeRoute.snapshot.url }; } @Component({ selector: 'app-root', template: `<div>Base URL:{{url | json}}</div> <router-outlet></router-outlet>`, }) export class App { private url: any; constructor(public activeRoute: ActivatedRoute) { this.url = activeRoute.snapshot.url }; } const appRoutes: Routes = [ { path: '1', component: Comp1 }, { path: '2', component: Comp2 }, { path: '**', component: Fail } ]; @NgModule({ imports: [BrowserModule, RouterModule.forRoot(appRoutes)], declarations: [App, Comp2, Comp1, Fail], bootstrap: [App] }) export class AppModule { }

Try running the module for the following URI:

Good luck, hope the code is demonstrative.

Improve this answer

Comments

2

You also can get params using one line of code.

constructor( private router: Router, private route: ActivatedRoute, ) { } this.route.snapshot.paramMap.get('id');
Improve this answer

Comments

1

check angular documentation, its all there: https://angular.io/docs/ts/latest/guide/router.html

constructor( private route: ActivatedRoute, private router: Router, private service: HeroService) {} ngOnInit() { this.sub = this.route.params.subscribe(params => { let id = +params['id']; // (+) converts string 'id' to a number this.service.getHero(id).then(hero => this.hero = hero); });
Improve this answer

8 Comments

I tried this before but getting undefined when trying to get query string parameter. params is actually empty object.
is this how you pass the parameter? onSelect(hero: Hero) { this.router.navigate(['/hero', hero.id]); }
this way [routerLink]="['/']" [queryParams]="{st: 'rec'}" I want to get st param
Then try the new way. you should really read this section on the docs.
maybe this is your missing part, check the id param in the hero route: export const heroesRoutes: RouterConfig = [ { path: 'heroes', component: HeroListComponent }, { path: 'hero/:id', component: HeroDetailComponent } ];
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.