Angular2 get url query parameters

Question

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

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

Но как только страница загружена, то PARAMS удаляются , 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> 

Машинопись:

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.

EDIT 2:

Если удалить резкие в URL переадресации, facebook перенаправить меня к хорошему URL, но без острого, угловатого не может разрешить 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 

Это означает, что проблема исходит от остры. Но без резких, угловых ошибок HTTP Error 404.0 - Not Found.

Answer 1

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

Импорт:

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 2

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

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

Вы ищете query parameters от 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 
} 

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

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

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

Answer 4

с помощью Javascript:

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

Answer 5

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