Angular2 obtener parámetros de consulta url

Estoy configurando un registro de Facebook para mi aplicación web Angular2. Una vez aceptada la aplicación a través de Facebook (después de ser redirigida a la página de autorización de Facebook), redirige a mi webapp con el token y el código como parámetros de url:

http://localhost:55976/?#access_token=MY_ACCESS_TOKEN&code=MY_CODE

Pero una vez que se carga la página, los parámetros se eliminan. La url se convierte en: 

http://localhost:55976/

¿Cómo puedo extraer los parámetros (access_token y code) antes de que se eliminen? Mi configuración de enrutamiento contiene:

{ path: 'login', component: LoginComponent },
{ path: 'login/:access_token/:code', component: LoginComponent },

EDITAR:

Así es como redirijo a facebook en mi inicio de sesión.componente: html:

<a class="btn btn-social btn-facebook socialaccount_provider facebook" title="Facebook" href="#" (click)="login_facebook()">
    <span class="fa fa-facebook"></span> <span style="padding-left:25px">Sign in with Facebook</span>
</a>

Typescript: 

login_facebook() {
    let url = 'https://www.facebook.com/dialog/oauth?'+
        'client_id=my_client_id' +
        '&redirect_uri=' + encodeURIComponent('http://localhost:55976/#/login/') +
        '&response_type=code%20token';
    console.log(url);
    window.location.href = url;
}

La api de facebook redirige a http://localhost:55976/#/login / , aquí es donde trato de obtener los parámetros access_token y code.

EDITAR 2:

Si elimino el sharp en la url de redirección, facebook me redirige a la URL correcta, pero sin el sharp, angular no puede resolver el URL.

Antes de eliminar'#': 

redirect_uri: http://localhost:55976/#/login/
facebook return: http://localhost:55976/?#access_token=MY_ACCESS_TOKEN&code=MY_CODE

Después de eliminar'#': 

redirect_uri: http://localhost:55976/login/
facebook return: http://localhost:55976/login/?#access_token=MY_ACCESS_TOKEN&code=MY_CODE

Eso significa que el problema viene de lo agudo. Pero sin el sharp, angular devuelve el error HTTP 404.0-Not Found.

Author: Ben, 2016-09-23
Source

6 answers

Está buscando parámetros de consulta de ActivatedRoute.

Para recibirlos, puedes ponerlos en la función OnInit de tu componente de la siguiente manera: 

private accesstoken;
private code;

constructor(private route: ActivatedRoute) { }

ngOnInit() {
  // Capture the access token and code
  this.route
      .queryParams
      .subscribe(params => {
          this.accesstoken = params['#access_token'];
          this.code = params['code'];
      });

  // do something with this.code and this.accesstoken
}

Hay más ejemplos en el enlace que puse arriba. puede que tenga problemas con angular porque el enrutador también identifica fragmentos, que comienzan con el #... Si angular lo identifica como un fragmento, entonces puedes suscribirte al fragmento observable desde ActivatedRoute y hacerlo así manera.

No estoy seguro de si estás siendo redirigido. Si es así, podría usar la opción de navegación preserveQueryParams, algo como esto.

this.router.navigate([redirect], {preserveQueryParams: true});
 27
Author: Federico Pettinella,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-09-23 20:42:49

Aquí está mi código de trabajo final:

Importaciones: 

import { Router, NavigationCancel } from '@angular/router';
import { URLSearchParams, } from '@angular/http';

Constructor: 

 constructor(public router: Router) {
    router.events.subscribe(s => {
      if (s instanceof NavigationCancel) {
        let params = new URLSearchParams(s.url.split('#')[1]);
        let access_token = params.get('access_token');
        let code = params.get('code');
      }
    });
  }
 14
Author: Ben,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-10-15 11:57:17

Usando Javascript: 

(new URL(location)).searchParams.get("parameter_name")
 3
Author: Jay Shah,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-07-10 15:48:56 
getQueryParams( locationSearch: string):any {
    let params = {};
    if( locationSearch ) {
        locationSearch = locationSearch.split('?')[1];
        let splited = locationSearch.split('&');
        for( let i = 0; i < splited.length; i++ ) {
            let propName = splited[i].split('=')[0];
            let propValue = splited[i].split('=')[1];
            params[propName] = propValue;
        }
    }

    return params;
}

let q = getQueryParams( location.search );
 1
Author: Alex Chaliy,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-11-03 01:48:13

Esto funciona para mí! :) 

import { ActivatedRoute } from '@angular/router'; 

constructor(private route: ActivatedRoute) { }

/** usage in the method */
let projectId = this.route.snapshot.queryParams.projectId;
 0
Author: Tejashree,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-05-25 05:57:19

¿ has probado esto?

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


     constructor(private router: Router) {

            this.route.params.forEach((params: Params) => {
            //here you can get your params
            let param = params['parameterName'];


            })
        }
 -1
Author: Emmanuel Villegas,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-09-23 20:28:30