Angular2 Component Router : Capture query parameters

Question

I'm struggling to capture URL query string parameters being passed to my angular2 app by a 3rd party API. The URL reads http://example.com?oauth_token=123

How can I capture the value of "oauth_token" inside a component? I'm happily using the component router for basic routing it's just the query string. I have made several attempts and my latest receiving component looks like

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

@Component({
    template: ''
})
export class TwitterAuthorisedComponent implements OnInit {

    private oauth_token:string;

    constructor(private route: ActivatedRoute) {}

    ngOnInit() {
        console.log('the oauth token is');
        console.log( this.route.snapshot.params.oauth_token );
    }
}

Any advice is appreciated.

** UPDATE

If I comment out all my routes the query parameters will stick however, the moment I include a route the query parameters are removed on page load. Below is a stripped down copy of my routes file with one route

import {NavigationComponent} from "./navigation/components/navigation.component";
import {TwitterAuthorisedComponent} from "./twitter/components/twitter-authorised.component";

import { provideRouter, RouterConfig } from '@angular/router';

export const routes: RouterConfig = [
    { path: '', component: TwitterAuthorisedComponent }
];

export const appRouterProviders = [
    provideRouter(routes)
];

If I remove the route the query params stick. Any advice?

Aswin KV · Accepted Answer · 2016-10-28 14:24:40Z

I you can catch the query prams using the bellow solution.

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

queryParams:string;

constructor(private router: Router, private actRoute: ActivatedRoute) 
{
    this.queryParams=
    this.router.routerState.snapshot.root.queryParams["oauth_token"];
}

Using this you will get the value of oauth_token to queryParams. I think this seems fine for you

If you need to update the value queryParams, query parameter changes you need to add some more code. Its like below.

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

    queryParams:string;
    sub:any;

    constructor(private router: Router, private actRoute: ActivatedRoute) 
    {
        this.queryParams=
        this.router.routerState.snapshot.root.queryParams["oauth_token"];
    }

   ngOnInit(){
    this.sub = this.router.routerState.root.queryParams.subscribe(params => {
      this.queryParams = params["oauth_token"];
    });
    }

Hope it will work for you.

Yaron Schwimmer · Accepted Answer · 2016-07-28 12:32:08Z

0

Query parameters can be obtained through the Router service.

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

@Component({
    template: ''
})
export class TwitterAuthorisedComponent implements OnInit {

    private oauth_token:string;

    constructor(private router: Router) {}

    ngOnInit() {
        console.log('the oauth token is');
        console.log( this.router.routerState.snapshot.queryParams.oauth_token );
    }
}

answered Jul 28, 2016 at 12:32

Yaron Schwimmer

5,3675 gold badges40 silver badges60 bronze badges

2 Comments

prime Over a year ago

Thanks for your feedback. I have tried your solution but it is not working for me although I'm sure you are correct. I have noticed if I load my application with a query string ?foo=bar it is lost on page load. The moment page renders the URL converts to localhost:8000/# and I cannot capture the URL from my AppComponent either. Is the change in URL to remove any query string normal?

Yaron Schwimmer Over a year ago

I don't think it's normal. Query parameters are supposed to stick. There's probably some redirection on the way.

Abdul Moiz Khan · Accepted Answer · 2016-07-28 12:41:14Z

0

You can do this by

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

@Component({
    template: ''
})
export class TwitterAuthorisedComponent implements OnInit {

    sub: any; //new line added
    private oauth_token:string;

    constructor(private router: Router) {}

    ngOnInit() {

    this.sub = this.route.params.subscribe(params => {
        let id = +params['oauth_token'];

        console.log('the oauth token is');
        console.log(id);
    });


    }
}

Hope this will help. Thank you

answered Jul 28, 2016 at 12:41

Abdul Moiz Khan

7135 silver badges14 bronze badges

1 Comment

prime Over a year ago

Thanks for the suggestion. I have updated my question as I try and drill down on the exact cause of the issue.

Collectives™ on Stack Overflow

Angular2 Component Router : Capture query parameters

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related