Angular2 erhält URL-Abfrageparameter

Ich bin einrichten einer Facebook-Registrierung für meine Angular2 web-app.
Sobald die Bewerbung akzeptiert wurde über Facebook (nach der Weiterleitung auf die Facebook-Autorisierung Seite), Umleitung auf meine webapp mit den token und den code als url-params:

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

Aber sobald die Seite geladen wird, der Parameter entfernt werden. Die url werden:

http://localhost:55976/

Wie kann ich das extrahieren der Parameter (access_token und-code), bevor Sie entfernt werden?
Meine routing-Konfiguration enthält:

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

EDIT:

Hier ist, wie ich die Umleitung zu facebook in meinem login.Komponente:
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>

Typoskript:

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

Die facebook-api Umleitung zu http://localhost:55976/#/login/das ist, wo ich versuche mir das access_token und code-Parameter.

EDIT 2:

Wenn ich die abnehme, der scharf in die redirect-url, facebook Umleitung mich zu den guten-URL, aber ohne die scharfen, kantigen beheben können, die url.

Vor dem entfernen '#':

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

Nach dem entfernen '#':

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

Bedeutet das, dass das problem kommt aus der sharp. Aber ohne die scharfen, kantigen gibt HTTP-Fehler 404.0 - Nicht Gefunden.

InformationsquelleAutor der Frage Ben | 2016-09-23

26

Du suchst Abfrageparameter von ActivatedRoute.

Um Sie zu erhalten, könnte man Sie in Ihre Komponenten ist OnInit Funktion wie diese:
```
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
}
```
Es gibt noch mehr Beispiele in dem link, den ich oben setzen. Sie kann haben Probleme mit dem Winkel, da der router erkennt auch Fragmente, die beginnen mit dem #... Wenn eckige hat identifizieren es als fragment, dann können Sie einfach abonnieren, um das fragment zu beobachten aus ActivatedRoute und tun es so.

Ich bin mir nicht sicher, ob Sie umgeleitet werden. Wenn Sie sind, das konnte man in der Verwendung der preserveQueryParams navigation option, so etwas wie dieses.
```
this.router.navigate([redirect], {preserveQueryParams: true});
```
InformationsquelleAutor der Antwort Federico Pettinella

Hier ist meine Letzte funktionierende code:

Importe:

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

Konstruktor:

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

InformationsquelleAutor der Antwort Ben

3

mit Javascript :
```
(new URL(location)).searchParams.get("parameter_name")
```
InformationsquelleAutor der Antwort Jay Shah

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

InformationsquelleAutor der Antwort Alex Chaliy

Dies funktioniert für mich! 🙂

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

constructor(private route: ActivatedRoute) { }

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

InformationsquelleAutor der Antwort Tejashree

-1

haben Sie versucht das?

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


            })
        }

InformationsquelleAutor der Antwort Emmanuel Villegas

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.