Angular2 Query Parameter from index URL

Question

I am trying to get the query params from a url in a component in Angular2

Version: "angular2": "npm:[email protected]",

I am trying to extract id query param in the component and display it

Here is the request.

localhost:8080/index.html?id=1

boot.ts

import 'reflect-metadata';
import 'angular2/bundles/angular2-polyfills';
import { bootstrap } from 'angular2/platform/browser';
import { provide} from 'angular2/core';
import { AppComponent } from './app.component';
import {ROUTER_PROVIDERS, Location, LocationStrategy,     HashLocationStrategy} from "angular2/router";
import {HTTP_PROVIDERS} from "angular2/http";

bootstrap(AppComponent , [ROUTER_PROVIDERS, HTTP_PROVIDERS, provide(LocationStrategy, {useClass: HashLocationStrategy})]);

Here is app.component.ts

import { Component } from 'angular2/core';
 import {Router, Location, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, RouteConfig, RouteParams} from 'angular2/router';

@Component({
    selector: 'my-app',
    template: '{{welcome}} {{queryParam}}',
    directives: [ROUTER_DIRECTIVES]
})
export class AppComponent {
    welcome: string = 'Query Param test!'
    queryParam : string;

    constructor(private _location: Location, private _routeParams:     RouteParams){
        console.log(_routeParams.get('id'));
        this.queryParam = _routeParams.get('id');
    }

}

I keep getting this error:

error message

I got this solution from another post. Not sure how to fix the error

A

may I know where you do have your RouteConfig code?

Pankaj Parkar
– Pankaj Parkar

2016-03-30 20:38:58 +00:00
Commented Mar 30, 2016 at 20:38 — Pankaj Parkar
– Pankaj Parkar, Commented Mar 30, 2016 at 20:38

Eric Martinez · Accepted Answer · 2016-03-30 20:46:58Z

0

RouteParams it's not available in the root component. It's only available to the routable components.

See RouterOutlet soure code, in its activate function, you can see the following

var providers = Injector.resolve([
  provide(RouteData, {useValue: nextInstruction.routeData}),
  provide(RouteParams, {useValue: new RouteParams(nextInstruction.params)}),
  provide(routerMod.Router, {useValue: childRouter})
]);

Basically RouteParams is being injected through RouterOutlet to the routable components, you can't access it in non-routable components (sorry for repeating myself).

answered Mar 30, 2016 at 20:46

Eric Martinez

31.9k9 gold badges95 silver badges91 bronze badges

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

Comments

Daryll · Accepted Answer · 2016-05-16 00:53:20Z

0

You can get the query params from the _location.path() in the AppComponent. You'd have to parse them yourself. I'm looking for the same thing, and haven't found a better solution.

I hope someone else follows up on this.

answered May 16, 2016 at 0:53

Daryll

34 bronze badges

Collectives™ on Stack Overflow

Angular2 Query Parameter from index URL

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related