How to get GET paramater in Angular2?

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?

3
Leave a Reply

avatar
3 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
Jason Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Jason
Guest

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

Jason
Guest

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 🙂

Jason
Guest

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