Angular 2의 URL에서 쿼리 매개 변수를 얻는 방법은 무엇입니까?

angular2.0.0-beta.7을 사용합니다. 구성 요소가 경로에로드되면 구성 요소가로 경로 /path?query=value1재 지정됩니다 /path. GET 매개 변수가 제거 된 이유는 무엇입니까? 매개 변수를 어떻게 보존 할 수 있습니까?

라우터에 오류가 있습니다. 내가 같은 주요 경로가 있다면

@RouteConfig([
  {
      path: '/todos/...',
      name: 'TodoMain',
      component: TodoMainComponent
  }
])

내 아이 루트는

@RouteConfig([
  { path: '/', component: TodoListComponent, name: 'TodoList', useAsDefault:true },
  { path: '/:id', component: TodoDetailComponent, name:'TodoDetail' }
])

그런 다음 TodoListComponent에서 매개 변수를 얻을 수 없습니다. 나는 얻을 수있다

params("/my/path;param1=value1;param2=value2") 

그러나 나는 고전을 원한다

query params("/my/path?param1=value1&param2=value2")

ActivatedRoute하나 의 인스턴스를 주입하면 a queryParams및 observable을 포함한 다양한 observable을 구독 할 수 있습니다 params.

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

@Component({...})
export class MyComponent implements OnInit {

  constructor(private activatedRoute: ActivatedRoute) {}

  ngOnInit() {
    // Note: Below 'queryParams' can be replaced with 'params' depending on your requirements
    this.activatedRoute.queryParams.subscribe(params => {
        const userId = params['userId'];
        console.log(userId);
      });
  }

}

구독 취소 관련 참고 사항

@Reto와 @ codef0rmer는 공식 문서에 따르면이 unsubscribe()경우 구성 요소 내부 onDestroy()메소드가 필요하지 않다는 것을 올바르게 지적했습니다 . 이것은 내 코드 샘플에서 제거되었습니다. ( 이 자습서의 파란색 경고 상자 참조 )

이 http://stackoverflow.com?param1=value 같은 URL

다음 코드로 param1을 얻을 수 있습니다.

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

@Component({
    selector: '',
    templateUrl: './abc.html',
    styleUrls: ['./abc.less']
})
export class AbcComponent implements OnInit {
    constructor(private route: ActivatedRoute) { }

    ngOnInit() {
        // get param
        let param1 = this.route.snapshot.queryParams["param1"];
    }
}

질문이 버전 베타 7을 지정 하더라도이 질문은 Google에서 각도 2 검색어 매개 변수 와 같은 일반적인 문구에 대한 최상위 검색 결과로 나타납니다 . 이러한 이유로 최신 라우터에 대한 답변이 있습니다 (현재는 alpha.7 ).

매개 변수를 읽는 방식이 크게 바뀌 었습니다. 먼저 다음 Router과 같이 생성자 매개 변수에서 호출 된 종속성을 주입해야합니다 .

constructor(private router: Router) { }

그런 다음 ngOnInit메소드 에서 쿼리 매개 변수를 구독 할 수 있습니다 (생성자도 괜찮지 만 ngOnInit테스트 가능성에 사용해야 함).

this.router
  .routerState
  .queryParams
  .subscribe(params => {
    this.selectedId = +params['id'];
  });

이 예에서는 URL과 같은 검색어 매개 변수 ID 를 읽습니다 example.com?id=41.

여전히 주목할 사항이 거의 없습니다.

1. paramslike의 속성에 액세스 하면 params['id']항상 문자열 이 반환 되며 앞에 접두사를 붙여 숫자 로 변환 할 수 있습니다 +.
2. 쿼리 매개 변수를 observable과 함께 가져 오는 이유는 새로운 구성 요소를로드하는 대신 동일한 구성 요소 인스턴스를 재사용 할 수 있기 때문입니다. 쿼리 매개 변수가 변경 될 때마다 구독 한 새 이벤트가 발생하므로 이에 따라 변경 사항에 대응할 수 있습니다.

@StevePaul의 답변이 정말 마음에 들었지만 외부 구독 / 수신 거부 전화없이 동일한 작업을 수행 할 수 있습니다.

import { ActivatedRoute } from '@angular/router';
constructor(private activatedRoute: ActivatedRoute) {
    let params: any = this.activatedRoute.snapshot.params;
    console.log(params.id);
    // or shortcut Type Casting
    // (<any> this.activatedRoute.snapshot.params).id
}

쿼리 매개 변수를 보내려면

import { Router } from '@angular/router';
this.router.navigate([ '/your-route' ], { queryParams: { key: va1, keyN: valN } });

쿼리 매개 변수를 받으려면

import { ActivatedRoute } from '@angular/router';
this.activatedRoute.queryParams.subscribe(params => {
    let value_1 = params['key'];
    let value_N = params['keyN'];
});

공식 출처

안녕하세요. URLSearchParams를 사용할 수 있습니다 . 자세한 내용은 여기를 참조하십시오 .

수입:

import {URLSearchParams} from "@angular/http";

그리고 기능 :

getParam(){
  let params = new URLSearchParams(window.location.search);
  let someParam = params.get('someParam');
  return someParam;
}

참고 : 모든 플랫폼에서 지원되는 것은 아니며 각도 문서에서 "EXPERIMENTAL"상태 인 것 같습니다.

먼저 Angular2로 작업 한 결과 쿼리 문자열이있는 URL은 /path;query=value1

사용하는 구성 요소에서 액세스하려면 다음과 같지만 이제 코드 블록을 따릅니다.

    constructor(params: RouteParams){
    var val = params.get("query");
    }

구성 요소를로드 할 때 구성 요소가 제거되는 이유는 기본 동작이 아닙니다. 깨끗한 테스트 프로젝트에서 구체적으로 확인했지만 리디렉션되거나 변경되지 않았습니다. 기본 경로입니까 아니면 라우팅에 특별한 것이 있습니까?

https://angular.io/docs/ts/latest/guide/router.html#!#query-parameters 의 Angular2 Tutorial에서 쿼리 문자열 및 매개 변수를 사용한 라우팅에 대해 읽으십시오.

아래에 설명 된 것처럼 ActivatedRoute를 사용하여 URL에 전달 될 때 쿼리 매개 변수를 얻을 수 있습니다.

url :-http : /domain.com? test = abc

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

@Component({
  selector: 'my-home'
})
export class HomeComponent {

  constructor(private sharedServices : SharedService,private route: ActivatedRoute) { 
    route.queryParams.subscribe(
      data => console.log('queryParams', data['test']));
  }

}

URL 매개 변수를 객체로 가져옵니다.

import { Router } from '@angular/router';
constructor(private router: Router) {
    console.log(router.parseUrl(router.url));
}

쿼리 매개 변수를 한 번만 얻으려면 가장 좋은 방법은 take 메서드 를 사용 하는 것이므로 구독 취소에 대해 걱정할 필요가 없습니다. 간단한 스 니펫은 다음과 같습니다.

constructor(private route: ActivatedRoute) {
  route.snapshot.queryParamMap.take(1).subscribe(params => {
     let category = params.get('category')
     console.log(category);
  })
}

참고 : 나중에 매개 변수 값을 사용하려면 take (1)를 제거하십시오 .

지금이야:

this.activatedRoute.queryParams.subscribe((params: Params) => {
  console.log(params);
});

다른 사람을 도울 수 있기를 바랍니다.

위의 질문은 페이지가 리디렉션 된 후 쿼리 매개 변수 값이 필요하며 스냅 샷 값 (관찰 할 수없는 대안)이 충분하다고 가정 할 수 있습니다.

공식 문서 에서 snapshot.paramMap.get에 대해 언급 한 사람은 없습니다 .

this.route.snapshot.paramMap.get('id')

전송하기 전에 이것을 전송 / 리 디렉팅 컴포넌트에 추가하십시오 :

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

그런 다음 다음 중 하나로 리디렉션 하십시오 ( here ).

this.router.navigate(['/heroes', { id: heroId, foo: 'foo' }]);

또는 간단히 :

this.router.navigate(['/heroes', heroId ]);

여기에 설명 된대로 라우팅 모듈에 이것을 추가했는지 확인 하십시오 .

 { path: 'hero/:id', component: HeroDetailComponent }

마지막으로 쿼리 매개 변수를 사용해야하는 구성 요소에서

• 가져 오기 추가 ( 여기에 문서화 됨 ) :

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

• ActivatedRoute 주입

(문서는 또한 switchMap을 가져오고 라우터와 HeroService도 삽입합니다. 그러나 관찰 가능한 대안에만 필요합니다. 우리의 경우와 같이 스냅 샷 대안을 사용할 때는 필요하지 않습니다) :

    constructor(
      private route: ActivatedRoute
    ) {}

• 필요한 값을 얻으십시오 ( here ).

  ngOnInit() {
    const id = this.route.snapshot.paramMap.get('id');
  }

참고 : 기능 모듈에 라우팅 모듈을 추가하는 경우 (문서에서 표시됨) APP.MODULE.ts가 AppRoutingModule (또는 루트 레벨 앱 라우트가있는 다른 파일)을 가져 오기 전에 APP.MODULE.ts에 있는지 확인하십시오 : []. 다른 기능 경로는 찾을 수 없습니다 ({path : '**', redirectTo : '/ not-found'} 후에는 찾을 수 없으며 찾을 수없는 메시지 만 표시됨).

생성자에 ActivatedRoute를 주입 한 다음 그 위에 params 또는 queryParams에 액세스하면됩니다.

constructor(private route:ActivatedRoute){}
ngOnInit(){
        this.route.queryParams.subscribe(params=>{
        let username=params['username'];
      });
 }

어떤 경우에는 NgOnInit에 아무것도 제공하지 않습니다 ... 아마도 매개 변수를 초기화하기 전에 초기화 호출로 인해 함수 debounceTime (1000)

예 =>

 constructor(private route:ActivatedRoute){}
    ngOnInit(){
            this.route.queryParams.debounceTime(100).subscribe(params=>{
            let username=params['username'];
          });
     }

debounceTime () 다른 소스 방출없이 특정 시간이 경과 한 후에 만 ​​소스에서 값을 방출합니다.

경로에 정의되어 있지 않으면 RouterState에서 매개 변수를 가져올 수 없으므로 예제에서 쿼리 문자열을 구문 분석해야합니다 ...

내가 사용한 코드는 다음과 같습니다.

let re = /[?&]([^=#&]+)=([^&#]*)/g;
let match;
let isMatch = true;
let matches = [];
while (isMatch) {
    match = re.exec(window.location.href);
    if (match !== null) {
        matches[decodeURIComponent(match[1])] = decodeURIComponent(match[2]);
        if (match.index === re.lastIndex) {
            re.lastIndex++;
        }
    }
    else {
        isMatch = false;
    }
}
console.log(matches);

쿼리 및 경로 (Angular 8)

당신은 같은 URL이있는 경우 https://myapp.com/owner/123/show?height=23 사용 후

combineLatest( [this.route.paramMap, this.route.queryParamMap] )
  .subscribe( ([pathParams, queryParams]) => {
    let ownerId = pathParams.get('ownerId');    // =123
    let height  = queryParams.get('height');    // =height
    // ...
  })

최신 정보

사용 this.router.navigate([yourUrl]);하고 쿼리 매개 변수가 yourUrl문자열에 포함 된 경우 각도 인코딩은 URL을 인코딩하고 다음과 같은 것을 얻습니다 https://myapp.com/owner/123/show%3Fheight%323- 위의 솔루션은 잘못된 결과를 제공합니다 queryParams는 비어 있으며, 쿼리 매개 변수는 경로 끝에있는 경우 마지막 매개 변수에 붙여 질 수 있습니다. 이 경우 탐색의 방법을 변경 이에

this.router.navigateByUrl(yourUrl);