Angular2コンポーネントルータ：クエリクエリパラメータを取得

Question

私は、サードパーティAPIによってangle2アプリケーションに渡されるURLクエリ文字列パラメータを取得するのに苦労しています。 URLが読み取るhttp://example.com?oauth_token=123

コンポーネント内で "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); 
    } 
} 

アドバイスをいただければ幸いです。

** UPDATE

私はすべての私のルートをコメントアウトした場合、クエリパラメータは、しかし、私は、クエリパラメータは、ページの読み込みに削除された経路を含めた瞬間に固執します。以下は私のルートのストリップダウンコピー私はルートクエリのparamsスティックを削除する場合は1つのルート

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

を持つファイルです。何かアドバイス？

Answer 1

クエリパラメータは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); 
    } 
} 

Answer 2

あなたは

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


    } 
} 

によってこれを行うことができますが、これが役立つことを願っています。ありがとうございます

Answer 3

私はあなたの質問に答えることができます。

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"]; 
    }); 
    } 

ご希望の場合はご利用ください。