2

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?

Improve this question

3 Answers 3

Reset to default
2

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.

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

Comments

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 ); } }
Improve this answer

2 Comments

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?
I don't think it's normal. Query parameters are supposed to stick. There's probably some redirection on the way.
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

Improve this answer

1 Comment

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.