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