Angular2 Component Router : Capture query parameters - angularjs

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?

Answer 1

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.

Answer 2

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 );
}
}

Answer 3

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