Angular2 구성 요소 라우터 : 쿼리 매개 변수 캡처

Question

제 3 자 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

는 순간 나는 쿼리 매개 변수 페이지로드에 제거 경로를 포함한다. 내가 길에게 검색어 매개 변수 스틱을 제거하면 다음 내 경로의 옷을 벗었을 복사 한 경로

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

희망은 도움이 될 것입니다.