url - parametros - routerlink

Angular2 obtener los parámetros de consulta url

Question

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

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

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

http://localhost:55976/

¿Cómo puedo extraer los parámetros (access_token y código) antes de eliminarlos? Mi configuración de enrutamiento contiene:

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

EDITAR:

Aquí es cómo redirigir a facebook en mi login.com: 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>

Mecanografiado:

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 redirección de la API de Facebook a http://localhost:55976/#/login/ , aquí es donde trato de obtener los parámetros de access_token y código.

EDIT 2:

Si elimino el sharp en la url de redireccionamiento, Facebook me redirige a la URL buena, pero sin el sharp, angular no puede resolver la 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 los retornos angulosos y angulosos HTTP Error 404.0 - No encontrado.

Answer 1

¡Esto funciona para mí! :)

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

constructor(private route: ActivatedRoute) { }

/** usage in the method */
let projectId = this.route.snapshot.queryParams.projectId;

Answer 2

¿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''];


            })
        }

Answer 3

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

Answer 4

Estás buscando parámetros de consulta de ActivatedRoute .

Para recibirlos, puede colocarlos en la función OnInit su componente de esta 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. Es posible que tenga problemas con angular porque el enrutador también identifica los fragmentos, que comienzan con # ... Si angular lo identifica como un fragmento, entonces puede suscribirse al fragmento observable desde ActivatedRoute y hacerlo de esa manera.

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

this.router.navigate([redirect], {preserveQueryParams: true});

Answer 5

utilizando Javascript:

(new URL(location)).searchParams.get("parameter_name")

Answer 6

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