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

angular 5.0.3을 사용하고 /app?param1=hallo&param2=123있습니다. 와 같은 쿼리 매개 변수를 사용하여 응용 프로그램을 시작하고 싶습니다 . Angular 2의 URL에서 쿼리 매개 변수를 얻는 방법에 나와있는 모든 팁은 무엇입니까? 나를 위해 작동하지 않습니다.

쿼리 매개 변수가 작동하는 방법에 대한 아이디어가 있습니까?

private getQueryParameter(key: string): string {
  const parameters = new URLSearchParams(window.location.search);
  return parameters.get(key);
}

이 개인 함수는 매개 변수를 얻는 데 도움이되지만 새로운 Angular 환경에서 올바른 방법이라고 생각하지 않습니다.

[업데이트 :] 내 주요 앱은

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

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    // would like to get query parameters here...
    // this.route...
  }
}

답변

Angular 5에서을 구독하면 쿼리 매개 변수에 액세스 할 수 있습니다 this.route.queryParams.

예: /app?param1=hallo&param2=123

param1: string;
param2: string;
constructor(private route: ActivatedRoute) {
    console.log('Called Constructor');
    this.route.queryParams.subscribe(params => {
        this.param1 = params['param1'];
        this.param2 = params['param2'];
    });
}

반면 경로 변수는 this.route.snapshot.params

예: /param1/:param1/param2/:param2

param1: string;
param2: string;
constructor(private route: ActivatedRoute) {
    this.param1 = this.route.snapshot.params.param1;
    this.param2 = this.route.snapshot.params.param2;
}

답변

이것은 나를 위해 가장 깨끗한 솔루션입니다

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

export class MyComponent {
  constructor(
    private route: ActivatedRoute
  ) {}

  ngOnInit() {
    const firstParam: string = this.route.snapshot.queryParamMap.get('firstParamKey');
    const secondParam: string = this.route.snapshot.queryParamMap.get('secondParamKey');
  }
}

답변

OP가 Angular 5 솔루션을 요청했지만 새로운 (6+) Angular 버전에 대해이 질문을 우연히 발견 한 모든 사용자에게 OP가 있음을 알고 있습니다. ActivatedRoute.queryParams (대부분의 다른 답변은 기반)에 관한 문서 인용 :

두 가지 이전 속성을 계속 사용할 수 있습니다. 대체 제품보다 성능 이 떨어지고, 권장하지 않으며 , 향후 Angular 버전에서 더 이상 사용되지 않을 수 있습니다 .

params — 경로와 관련된 필수 및 선택적 매개 변수가 포함 된 Observable입니다. 대신 paramMap을 사용하십시오.

queryParams — 모든 경로에 사용 가능한 쿼리 매개 변수가 포함 된 Observable입니다. 대신 queryParamMap을 사용하십시오.

Docs 에 따르면 쿼리 매개 변수를 얻는 간단한 방법은 다음과 같습니다.

constructor(private route: ActivatedRoute) { }

ngOnInit() {
    this.param1 = this.route.snapshot.paramMap.get('param1');
    this.param2 = this.route.snapshot.paramMap.get('param2');
}

고급 구성 요소 (예 : 고급 구성 요소 재사용)는 이 문서 장을 참조하십시오 .

편집하다:

아래 의견에서 올바르게 언급 했듯이이 답변은 적어도 OP에서 지정한 경우에는 잘못되었습니다.

OP는 전역 쿼리 매개 변수 (/ app? param1 = hallo & param2 = 123)를 요청합니다. 이 경우 queryParamMap을 사용해야합니다 (@ dapperdan1985 답변과 동일).

반면에 paramMap은 경로에 특정한 매개 변수에 사용됩니다 (예 : / app / : param1 / : param2, 결과적으로 / app / hallo / 123).

@JasonRoyle과 @daka에게 감사의 말을 전합니다.

답변

다음 과 같은 HttpParams를 사용할 수도 있습니다 .

  getParamValueQueryString( paramName ) {
    const url = window.location.href;
    let paramValue;
    if (url.includes('?')) {
      const httpParams = new HttpParams({ fromString: url.split('?')[1] });
      paramValue = httpParams.get(paramName);
    }
    return paramValue;
  }

답변

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

constructor(private route: ActivatedRoute) {}

ngOnInit() {
    console.log(this.route.snapshot.queryParamMap);
}

최신 정보

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

export class LoginComponent {
    constructor(private router: Router) {
        const snapshot: RouterStateSnapshot = router.routerState.snapshot;
        console.log(snapshot);  // <-- hope it helps
    }
}

답변

나를위한 작업 :

constructor(private route: ActivatedRoute) {}

ngOnInit()
{
    this.route.queryParams.subscribe(map => map);
    this.route.snapshot.queryParams;
}

더 많은 옵션을 볼 angular2에 URL에서 어떻게 GET 쿼리 PARAMS를?

답변

쿼리 및 경로 매개 변수 (Angular 8)

https://myapp.com/user/666/read?age=23 같은 URL의 경우

import { combineLatest } from 'rxjs';
// ...

combineLatest( [this.route.paramMap, this.route.queryParamMap] )
  .subscribe( ([pathParams, queryParams]) => {
    let userId = pathParams.get('userId');    // =666
    let age    = queryParams.get('age');      // =23
    // ...
  })