Angular 2의 url에서 쿼리 파라미터를 얻는 방법

Angular 2의 url에서 쿼리 파라미터를 얻는 방법

각도가 2.0.0~125입니다.칠면조가 음음음 음음 음음 음음 like like와 같은 되어 있는 /path?query=value1''로 됩니다./pathGET ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★」매개 변수를 보존하려면 어떻게 해야 합니까?

라우터에 오류가 있습니다.주요 루트가 있다면

@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자료를 할 수 .queryParams a. a. a.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);
      });
  }

}

등록 해제에 관한 주의사항ING

@에 따라 @Reto @codef0rmer @codef0rmer @codef0rmer @codef0rmer @codef0rmer @codef0rmer @unsubscribe()onDestroy()이 경우 메서드는 필요하지 않습니다.이것은 제 코드 샘플에서 삭제되었습니다.(이 튜토리얼의 파란색 경보 상자 참조)

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

파라미터 1은 다음 코드로 취득할 수 있습니다.

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을 지정하지만 각도 2 쿼리 매개 변수와 같은 일반적인 문구에 대한 Google 검색 결과로도 나타납니다.이 때문에, 최신의 라우터(현재는 alpha.7)에 대한 회답은 다음과 같습니다.

패러머를 읽는 방식이 극적으로 바뀌었다.이라는 것을 .Router다음과 같은 생성자 매개 변수에서 사용할 수 있습니다.

constructor(private router: Router) { }

부터는 그, 우, 우, 우, paramet의 쿼리 파라미터를 할 수 .ngOnInit method (method))ngOnInit).

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

이 예에서는 다음과 같은 URL에서 쿼리 파라미터 ID를 읽습니다.example.com?id=41.

아직 주의할 점이 몇 가지 있습니다.

1. paramsparams['id']항상 문자열을 반환합니다.이 문자열에는 프리픽스를 붙이면 숫자로 변환할 수 있습니다.+.
2. 쿼리 매개 변수가 관찰 가능한 상태로 가져오는 이유는 새 구성 요소 인스턴스를 로드하는 대신 동일한 구성 요소 인스턴스를 다시 사용할 수 있기 때문입니다.쿼리 파라미터가 변경될 때마다 등록한 새로운 이벤트가 발생하므로 변경에 따라 대응할 수 있습니다.

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

---

공식 출처

안녕하세요, URLearchParams를 사용할 수 있습니다.자세한 내용은 이쪽을 참조해 주세요.

Import:

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

및 기능:

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

주의: 일부 플랫폼에서는 지원되지 않으며 각도 문서에 의해 "Experimental" 상태가 된 것 같습니다.

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

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

URL에 전달된 쿼리 파라미터는 다음과 같이 Activated Route를 사용하여 얻을 수 있습니다.

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

}

은 ", Angular2"가 ./path;query=value1

사용하는 구성 요소에서 액세스하려면 다음과 같이 하십시오.

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

컴포넌트를 로드할 때 삭제되는 이유는 기본 동작이 아닙니다.클린 테스트 프로젝트에서 구체적으로 확인했지만 리다이렉트나 변경은 없었습니다.디폴트 루트입니까, 아니면 라우팅에 대해 특별한 루트입니까?

쿼리 문자열 및 매개 변수를 사용한 라우팅에 대한 자세한 내용은 https://angular.io/docs/ts/latest/guide/router.html#!#query-parameters의 Angular2 튜토리얼을 참조하십시오.

현재, 다음과 같습니다.

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

다른 사람에게 도움이 되었으면 좋겠어요.

위의 질문에서는 페이지가 리다이렉트된 후에 쿼리 파라미터 값이 필요하며 스냅샷 값(관찰 불가능한 대체 값)이면 충분하다고 가정할 수 있습니다.

여기에서는 snapshot.paramMap.get에 대해 공식 문서에서 언급하지 않았습니다.

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

송신/재다이렉트 컴포넌트를 송신하기 전에, 이것을 추가합니다.

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

다음에, 다음의 어느쪽인가를 리다이렉트 합니다(여기 참조).

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

또는 단순하게:

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

다음 설명에 따라 라우팅 모듈에 이 기능이 추가되었는지 확인하십시오.

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

마지막으로 쿼리 파라미터를 사용해야 하는 컴포넌트에서

• Import 추가(여기에 기재):

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

• Activated Route 주입

(또한 매뉴얼에서는 switchMap을 Import하여 라우터 및 HeroService를 주입합니다.단, 이러한 정보는 관찰 가능한 대체 수단에만 필요합니다.이러한 대체 방법은 스냅샷 대체 방법을 사용하는 경우에는 필요하지 않습니다).

    constructor(
      private route: ActivatedRoute
    ) {}

• 필요한 가치를 얻을 수 있습니다(여기서 설명).

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

주의: 기능 모듈에 라우팅 모듈을 추가할 경우(설명서에 나와 있음) 앱에서 확인하십시오.Module.ts 라우팅 모듈은 Import 시 AppRoutingModule(또는 루트 레벨의 앱 루트가 있는 다른 파일) 앞에 있습니다.그렇지 않으면 기능 루트를 찾을 수 없습니다({path: '**', 리다이렉트 후).수신인: '/not-found' }. 찾을 수 없는 메시지만 표시됩니다.

쿼리 파라미터를 1회만 취득하는 경우에는 take 메서드를 사용하는 것이 가장 좋기 때문에 가입 해제를 걱정할 필요가 없습니다.다음은 간단한 스니펫입니다.-

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

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

컨스트럭터에 ActivatedRoute를 삽입하고 그 위에 있는 파라미터 또는 queryParams에 액세스하기만 하면 됩니다.

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

경우에 따라서는 NgOnInit에 아무것도 표시되지 않는 경우도 있습니다.이 경우 파라미터 초기화 전 init 호출이 원인일 수 있습니다.이 경우 함수 debounceTime(1000)에 의해 관찰 가능한 시간 동안 대기하도록 요구함으로써 이를 실현할 수 있습니다.

예: = >

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

debounce Time() 다른 소스 전송 없이 특정 시간 스팬이 경과한 후에만 관측 가능한 소스로부터 값을 내보냅니다.

쿼리 및 경로(각도 8)

https://myapp.com/owner/123/show?height=23과 같은 URL이 있는 경우

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그런 다음 string이 URL을 angular 인코딩하면 다음과 같은 결과가 나타납니다. https://myapp.com/owner/123/show%3Fheight%323 이상의 솔루션은 잘못된 결과를 제공합니다(queryParams는 비어 있고 쿼리 파라미터는 경로 끝에 있는 경우 마지막 경로 파라미터에 붙여질 수 있습니다).이 경우 탐색 방법을 다음과 같이 변경하십시오.

this.router.navigateByUrl(yourUrl);

구식 솔루션:

queryParams(): Map<String, String> {
  var pairs = location.search.replace("?", "").split("&")
  var params = new Map<String, String>()
  pairs.map(x => {
    var pair = x.split("=")
    if (pair.length == 2) {
      params.set(pair[0], pair[1])
    }
  })

  return params
}

RouterState가 루트에 정의되어 있지 않으면 파라미터를 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);

언급URL : https://stackoverflow.com/questions/35688084/how-to-get-query-params-from-url-in-angular-2