Angular2組件路由器：捕獲查詢參數

我正在努力捕獲通過第三方API傳遞給我的angular2應用程序的URL查詢字符串參數。網址爲http://example.com?oauth_token=123 Angular2組件路由器：捕獲查詢參數

如何在組件內捕獲「oauth_token」的值？我很高興地使用組件路由器進行基本路由，它只是查詢字符串。我做了幾次嘗試，我的最新接收組件看起來像

import { Component, OnInit } from '@angular/core'; 
import { ActivatedRoute } from '@angular/router'; 

@Component({ 
    template: '' 
}) 
export class TwitterAuthorisedComponent implements OnInit { 

    private oauth_token:string; 

    constructor(private route: ActivatedRoute) {} 

    ngOnInit() { 
     console.log('the oauth token is'); 
     console.log(this.route.snapshot.params.oauth_token); 
    } 
}

任何意見表示讚賞。

**更新

如果我註釋掉我的所有路由但是查詢參數會堅持，我一時包括查詢參數頁面加載取出的路線。下面是我的路線文件的一個簡化的副本與一條路線

import {NavigationComponent} from "./navigation/components/navigation.component"; 
import {TwitterAuthorisedComponent} from "./twitter/components/twitter-authorised.component"; 

import { provideRouter, RouterConfig } from '@angular/router'; 

export const routes: RouterConfig = [ 
    { path: '', component: TwitterAuthorisedComponent } 
]; 

export const appRouterProviders = [ 
    provideRouter(routes) 
];

如果我刪除路由查詢參數粘。有什麼建議？

來源

2016-07-28 prime

查詢參數可以通過Router服務獲得。

import { Component, OnInit } from '@angular/core'; 
import { Router } from '@angular/router'; 

@Component({ 
    template: '' 
}) 
export class TwitterAuthorisedComponent implements OnInit { 

    private oauth_token:string; 

    constructor(private router: Router) {} 

    ngOnInit() { 
     console.log('the oauth token is'); 
     console.log(this.router.routerState.snapshot.queryParams.oauth_token); 
    } 
}

來源

2016-07-28 12:32:08 yarons

感謝您的反饋。我已經嘗試過您的解決方案，但它不適合我，儘管我確信您是正確的。我注意到如果我用查詢字符串加載我的應用程序？foo = bar它在頁面加載時丟失。時刻頁面呈現URL轉換爲http：// localhost：8000 /＃/，我無法從我的AppComponent捕獲URL。 URL中的更改是否將任何查詢字符串移除爲正常？ – prime

我認爲這不正常。查詢參數應該堅持。途中可能會有一些重定向。 – yarons

您可以通過

import { Component, OnInit } from '@angular/core'; 
import { Router } from '@angular/router'; 

@Component({ 
    template: '' 
}) 
export class TwitterAuthorisedComponent implements OnInit { 

    sub: any; //new line added 
    private oauth_token:string; 

    constructor(private router: Router) {} 

    ngOnInit() { 

    this.sub = this.route.params.subscribe(params => { 
     let id = +params['oauth_token']; 

     console.log('the oauth token is'); 
     console.log(id); 
    }); 


    } 
}

希望這將有助於做到這一點。謝謝

來源

2016-07-28 12:41:14

感謝您的建議。在嘗試深入研究問題的確切原因時，我已經更新了我的問題。 – prime

我可以使用下面的解決方案來捕獲查詢語句。

import { Router, Route, ActivatedRoute } from '@angular/router'; 

queryParams:string; 

constructor(private router: Router, private actRoute: ActivatedRoute) 
{ 
    this.queryParams= 
    this.router.routerState.snapshot.root.queryParams["oauth_token"]; 
}

使用此，您將獲得oauth_token的值爲queryParams。我認爲這對你來說似乎很好

如果你需要更新值queryParams，查詢參數的變化，你需要添加更多的代碼。它如下所示。

import { Router, Route, ActivatedRoute } from '@angular/router'; 

    queryParams:string; 
    sub:any; 

    constructor(private router: Router, private actRoute: ActivatedRoute) 
    { 
     this.queryParams= 
     this.router.routerState.snapshot.root.queryParams["oauth_token"]; 
    } 

    ngOnInit(){ 
    this.sub = this.router.routerState.root.queryParams.subscribe(params => { 
     this.queryParams = params["oauth_token"]; 
    }); 
    }

希望它能爲你工作。

來源

2016-10-28 14:24:40

Angular2組件路由器：捕獲查詢參數

回答

相關問題