How to get GET paramater in Angular2?

Question

By accessing myproject.dev/people?filter%5Bindustry%5D=finance&filter%5BstartWith%5D=a, Angular2 point the url to myproject.dev/people

Here is my RouteConfig:

@RouteConfig([
    {
        path: '/people',
        name: config.route.main,
        component: MainComponent,
        useAsDefault: true
    }
])

In MainComponent:

/// <reference path="../../../typings/angular2.d.ts" />

import {Component, Injector} from 'angular2/core';
import {ROUTER_DIRECTIVES, Router, RouteParams} from 'angular2/router';
import {BaseResourceComponent} from '../../Component/BaseResourceComponent';
import {Status as MainStatus} from '../../reusable/modules/status.svc';

import {Status} from '../../reusable/modules/status.svc';
import {Config} from "./Config";

import URI from 'urijs';

export class MainComponent extends BaseResourceComponent {
    constructor(config: Config, status: Status, mainStatus: MainStatus, private router: Router, private routeParams: RouteParams) {
        super(config, status, mainStatus);
    }

    onInit() {
        var path = new URI(window.location.href);
        path.setQuery('filter[industry]', 'fashion');
        path.setQuery('filter[startWith]', 'a');

        console.log(path);
        console.log(this.router);
        //this.router.root.lastNavigationAttempt = "/people?filter%5Bindustry%5D=finance&filter%5BstartWith%5D=a"

        console.log(this.routeParams);
        // this.routeParams returns {params: Object}
        // this.routeParams.params.get('filter') return null
    }
}

I still can get it from this.router.root.lastNavigationAttempt, but this is kind of tricky way to get it only. Any better way to get the GET parameters?

to answer correctly it would require a [plunker](http://plnkr.co) — Ankit Singh, Apr 22 '16 at 04:38

score 0 · Answer 1 · answered Apr 22 '16 at 05:03

0

In the root component you can inject the router and subscribe, then on route events get the params from the router like

export class AppComponent {
  constructor(private router:Router) {
    router.subscribe(route => {
      console.debug(this.router.currentInstruction.component.params);
    });
  }
}

On components added by the router you can inject RouteParams directly like

export class Other{
    constructor(private routeParams: RouteParams) {
    console.debug(this.routeParams);
    console.log(this.routeParams.get('filter_industry'));
    console.log(this.routeParams.get('filter_start_with'));
  }
}

Plunker example

answered Apr 22 '16 at 05:03

Günter Zöchbauer

623,577
216
2,003
1,567

I want user enter the URL `myproject.dev/people?filter%5Bindustry%5D=finance&filter%5BstartWith%5D=a` in browser then my component can intercept parameters. I know how to get parameters from a route generated by Angular internally with RouteParams, just like what you show. But this is not my problem want to solve. – tom10271 Apr 22 '16 at 06:07
What is the difference between "intercept" and "get"? – Günter Zöchbauer Apr 22 '16 at 06:08
When user `ENTER this URL in BROWSER DIRECTLY` => `myproject.dev/people?filter%5Bindustry%5D=finance&filter%5BstartWith%5D=a`, `Angular2` `POINT` the `URL` to `myproject.dev/people`, making all `GET` parameters `?filter%5Bindustry%5D=finance&filter%5BstartWith%5D=a` get `TRIMMED` – tom10271 Apr 22 '16 at 06:13
Simpler version, When I visit `url.com?params=123` directly, Angular neglected `?params=123`. – tom10271 Apr 22 '16 at 06:15
See this if you don't understand what I mean, I have exactly the same problem but with Angular 2.0.0 beta12. http://stackoverflow.com/questions/32816388/how-to-keep-query-string-parameters-in-url-when-accessing-a-route-of-an-angular – tom10271 Apr 22 '16 at 06:18
I guess I understand you question now. I have to try it locally. That can't be tested in a Plunker – Günter Zöchbauer Apr 22 '16 at 06:37
Yes I know, because you need to access it directly which Plunker cannot do. – tom10271 Apr 22 '16 at 06:43
A Plunker would have helped a lot anyway currently I can just guess how things are connected. What does the root component and routes look like, where in the component tree is the component in your questions placed, ... It's difficult and cumbersome to guess what things you might actually do. It's easy to copy a working Plunker to a local project. – Günter Zöchbauer Apr 22 '16 at 06:45
I will prepare code for you tonight in HKT for you to download. Thank you for your help first. – tom10271 Apr 22 '16 at 06:51
Sure, add a comment so I get notified. – Günter Zöchbauer Apr 22 '16 at 06:56
Interesting, If I access the link `http://project.dev/people/;filter[industry]=test`, it works. But if this link is `http://project.dev/people/?filter[industry]=test` then Angular with just trim it. – tom10271 Apr 22 '16 at 07:04
I guess the first one is what Angular creates when you navigate to this route. For child routes you can't have query parameters (`?`) only matrix parameters `;`. Query parameters work only on root routes. – Günter Zöchbauer Apr 22 '16 at 07:07

score 0 · Answer 2 · answered Apr 22 '16 at 10:18

My solution : certainly not the best way t odo it but it work : I assume that you have this kin of url : http://localhost:8080/contextPath/index.html?login=true#token_type=Bearer&expires_in=9999&access_token=xxxXXXXXxxx

//get base url to get the token
if

(this.location == "")

{
    console.log("traitement location");
    this.location = location.href;
}

//extract all :
if (this.location != "") {
    console.log("traitement token");
    this.login = this.location.split("?")[0].split("=")[1];
    this.token_type = this.location.split("?")[1].split("#")[1].split("&")[0].split("=")[1];
    this.expire_in = +this.location.split("?")[1].split("#")[1].split("&")[1].split("=")[1];
    this.setLocalDateValid((this.expire_in + this.nowDate()).toString());
    this.token = this.location.split("?")[1].split("#")[1].split("&")[2].split("=")[1];
}

// then store it 
this.setLocalToken(this.token);

Certainly not the best way to do it but it work perfectly well :)

If I were you I will simply use URI.js. btw I don't this think is a solution to my question at all. — tom10271, Apr 22 '16 at 14:49

score 0 · Accepted Answer · answered Apr 22 '16 at 14:55

0

@Günter Zöchbauer is correct. Child route can only use matrix parameter but not query parameter.

answered Apr 22 '16 at 14:55

tom10271

4,222
5
33
62

New angular2 router (v3) has better support to Query Parameters. Find out more in developer guide: https://angular.io/docs/ts/latest/guide/router.html#!#child-routers-and-query-parameters – Baumi Jun 17 '16 at 20:02

How to get GET paramater in Angular2?

3 Answers3

Linked