Angular2 получить параметры запроса url

Я настраиваю регистрацию в Facebook для своего веб-приложения Angular2. После того, как приложение будет принято через Facebook (после перенаправления на страницу авторизации на Facebook), он перенаправляет на мой webapp с токеном и кодом как параметры URL:

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

Но как только страница загружается, параметры удаляются. URL станет:

http://localhost:55976/

Как я могу извлечь параметры (access_token и код) до их удаления? Моя конфигурация маршрутизации содержит:

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

EDIT:

Вот как я перенаправляю на facebook в свой login.component: 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;
}

facebook api перенаправляет на http://localhost:55976/#/login/, вот где я пытаюсь получить параметры access_token и code.

ИЗМЕНИТЬ 2:

Если я удаляю резкость в URL-адресе перенаправления, facebook перенаправляет меня на хороший URL-адрес, но без резких angular не может разрешить URL-адрес.

Перед удалением '#':

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

После удаления '#':

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

Это означает, что проблема исходит из острой. Но без резкости, angular возвращает HTTP-ошибку 404.0 - не найден.

Ответ 1

Вот мой последний рабочий код:

Импорт

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

Конструктор:

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

Ответ 2

Вы ищете параметры запроса от ActivatedRoute.

Чтобы получить их, вы можете поместить их в свою компонентную функцию OnInit следующим образом:

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
}

В приведенной выше ссылке больше примеров. У вас могут быть проблемы с angular, потому что маршрутизатор также идентифицирует фрагменты, которые начинаются С#... Если angular идентифицирует его как фрагмент, вы можете просто подписаться на фрагмент, наблюдаемый с ActivatedRoute, и сделать это таким образом.

Я не уверен, что вы перенаправлены. Если да, то можно было бы использовать опцию навигации preserveQueryParams, что-то вроде этого.

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

Ответ 3

с помощью Javascript:

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

Ответ 4

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

Ответ 5

Это работает для меня! :)

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

constructor(private route: ActivatedRoute) { }

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

Ответ 6

Вы пробовали это?

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


            })
        }