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
    // ...
  })

최신 정보

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

this.router.navigateByUrl(someUrl);

비슷한 솔루션을 찾고 있었을 때이 질문을 우연히 발견했지만 전체 응용 프로그램 수준 라우팅 또는 더 많은 가져온 모듈과 같은 것이 필요하지 않았습니다.

다음 코드는 사용하기에 적합하며 추가 모듈이나 가져 오기가 필요하지 않습니다.

  GetParam(name){
    const results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href);
    if(!results){
      return 0;
    }
    return results[1] || 0;
  }

  PrintParams() {
    console.log('param1 = ' + this.GetParam('param1'));
    console.log('param2 = ' + this.GetParam('param2'));
  }

http://localhost:4200/?param1=hello&param2=123 출력 :

param1 = hello
param2 = 123

Angular Router 는 URL을 UrlTree 로 구문 분석 하는 parseUrl (url : string) 메소드를 제공합니다 . UrlTree의 속성 중 하나는 queryParams입니다. 따라서 다음과 같이 sth를 수행 할 수 있습니다.

this.router.parseUrl(this.router.url).queryParams[key] || '';

불행히도 가장 깨끗한 솔루션은 가장 확장 가능한 솔루션이 아닙니다. 최신 버전의 Angular에서는 다른 답변에서 ActivatedRoute Injectible을 사용하고 특히 snapshot 속성을 사용하여 쿼리 매개 변수를 쉽게 얻을 수 있다고 제안합니다.

this.route.snapshot.queryParamMap.get('param')

또는 subscribe 속성 (예 : 쿼리 문자열이 업데이트되는 경우 (예 : 사용자 ID 탐색)에 사용) :

this.route.queryParamMap.subscribe(params => console.log(params));

이 솔루션에 한동안 해결되지 않은 틈새 결함이 있음을 알려드립니다. https://github.com/angular/angular/issues/12157

대체로 유일한 방탄 솔루션은 좋은 오래된 바닐라 자바 ​​스크립트를 사용하는 것입니다. 이 경우 URL 조작을위한 서비스를 작성했습니다.

import { Injectable } from '@angular/core';
import { IUrl } from './iurl';

@Injectable()
export class UrlService {
    static parseQuery(url: string): IUrl {
        const query = url.slice(url.indexOf('?')+1).split('&').reduce( (acc,query) => {
            const parts = query.split('=');
            acc[parts[0]] = parts[1];
            return acc;
        }, {});

        return {
            a: query['a'],
            b: query['b'],
            c: query['c'],
            d: query['d'],
            e: query['e']
        }
    }
}

빈 라우트 객체가있는 경우 이는 주로 app.component.html에서 라우터 콘센트를 사용하지 않기 때문입니다.

이것이 없으면 비어 있지 않은 하위 오브젝트, 특히 params & queryParams가 포함 된 의미있는 라우트 오브젝트를 얻을 수 없습니다.

<router-outlet><router-outlet>전화하기 직전 에 추가 하십시오 <app-main-component></app-main-component>

그 전에 앱 라우팅에서 쿼리 매개 변수가 준비되어 있는지> 앱 구성 요소에서 사용하는 클래스 경로를 내보내십시오.

param: '/param/:dynamicParam', path: MyMainComponent

마지막으로, 매개 변수를 얻으려면 this.route.snapshot.params.dynamicParamdynamicParam이 앱 라우팅 구성 요소에 사용되는 이름을 개인적으로 사용합니다 . :)

경로에주의하십시오. "redirectTo"는 쿼리 매개 변수를 제거합니다.

const appRoutes: Routes [
 {path: "one", component: PageOneComponent},
 {path: "two", component: PageTwoComponent},
 {path: "", redirectTo: "/one", pathMatch: full},
 {path: "**", redirectTo: "/two"}
]

"/ main? param1 = a & param2 = b와 같은 쿼리 매개 변수를 사용하여 기본 구성 요소를 호출했으며 리디렉션 전달이 적용되기 전에 쿼리 매개 변수가 기본 구성 요소의"ngOnInit () "메서드에 도착한다고 가정합니다.

그러나 이것은 잘못입니다. 리디렉션은 이전에 이루어졌으며 쿼리 매개 변수를 삭제하고 기본 매개 변수에서 쿼리 매개 변수없이 ngOnInit () 메서드를 호출합니다.

노선의 세 번째 줄을

{path: "", component: PageOneComponent},

이제 내 쿼리 매개 변수는 기본 구성 요소 ngOnInit 및 PageOneComponent에서 액세스 할 수 있습니다.

발견 : 상위 구성 요소가 ActivatedRoute에서 빈 매개 변수를 얻습니다.

나를 위해 일했다 :

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

@Component({
  selector: 'app-navigation-bar',
  templateUrl: './navigation-bar.component.html',
  styleUrls: ['./navigation-bar.component.scss']
})
export class NavigationBarComponent implements OnInit, OnDestroy {
  private sub: any;
  constructor(private route: ActivatedRoute, private router: Router) {}

  ngOnInit() {
    this.sub = this.router.events.subscribe(val => {
      if (val instanceof RoutesRecognized) {
        console.log(val.state.root.firstChild.params);
      }
    });
  }

  ngOnDestroy() {
    this.sub.unsubscribe();
  }

}

방금 동일한 문제가 발생하여 대부분의 답변은 Angular 내부 라우팅의 경우에만 해결 된 다음 요청 매개 변수와 동일하지 않은 경로 매개 변수의 경우 일부 해결됩니다.

Lars의 원래 질문과 비슷한 유스 케이스가 있다고 생각합니다.

나에게 유스 케이스는 추천 추적입니다.

mycoolpage.com해시 라우팅과 함께 앵귤러가 실행 되므로로 mycoolpage.com리디렉션됩니다 mycoolpage.com/#/. 그러나 추천을 위해 같은 링크 mycoolpage.com?referrer=foo도 사용할 수 있어야합니다. 불행히도 Angular는 즉시 요청 매개 변수를 제거하고로 직접 이동합니다 mycoolpage.com/#/.

빈 구성 요소 + AuthGuard를 사용하여 점점 '트릭'의 모든 종류의 queryParams나 queryParamMap, 나를 위해 불행하게도,하지 작업을했다. 그들은 항상 비어있었습니다.

내 해키 솔루션은 결국 요청 매개 변수 와 함께index.html 전체 URL을 가져 오는 작은 스크립트에서 이를 처리하는 것으로 끝났습니다 . 그런 다음 문자열 조작을 통해 요청 매개 변수 값을 가져 와서 창 개체에 설정합니다. 그런 다음 별도의 서비스가 창 개체에서 ID를 가져 오는 것을 처리합니다.

index.html 스크립트

const paramIndex = window.location.href.indexOf('referrer=');
if (!window.myRef && paramIndex > 0) {
  let param = window.location.href.substring(paramIndex);
  param = param.split('&')[0];
  param = param.substr(param.indexOf('=')+1);
  window.myRef = param;
}

서비스

declare var window: any;

@Injectable()
export class ReferrerService {

  getReferrerId() {
    if (window.myRef) {
      return window.myRef;
    }
    return null;
  }
}

간단한 솔루션

 // in routing file
       {
            path: 'checkout/:cartId/:addressId',
            loadChildren: () => import('./pages/checkout/checkout.module').then(m => m.CheckoutPageModule)
          },

    // in Component file

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

                 constructor(
                      private _Router: ActivatedRoute
                  ) { }

                  ngOnInit() {
                    this.cartId = this._Router.snapshot.params.cartId;
                    this.addressId = this._Router.snapshot.params.addressId;
                    console.log(this.addressId, "addressId")
                    console.log(this.cartId, "cartId")
                  }

http : // localhost : 4200 / products? order = popular

다음과 같이 주문 쿼리 매개 변수에 액세스 할 수 있습니다.

this.route.queryParams
      .filter(params => params.order)
      .subscribe(params => {
        console.log(params)// {order: "popular"}

        this.order = params.order;
        console.log(this.order); // popular
      });
  }

paramMap 객체로 관찰 가능 객체를 반환하는 queryParamMap도 있습니다.

다음과 같은 경로 URL이 주어집니다.

http : // localhost : 4200 / products? order = popular & filter = new

this.route.queryParamMap.subscribe(params => {
  this.orderObj = {...params.keys, ...params};
});

소스-https: //alligator.io/angular/query-parameters/

나는 Angular 8을 생각합니다.

ActivatedRoute.params로 교체 ActivatedRoute.paramMap ActivatedRoute.queryParams되었습니다로 교체되었습니다 ActivatedRoute.queryParamMap

/*
Example below url with two param (type and name) 
URL : http://localhost:4200/updatePolicy?type=Medicare%20Insurance&name=FutrueInsurance
*/ 
  constructor(private route: ActivatedRoute) {
    //Read url query parameter `enter code here`
  this.route.queryParams.subscribe(params => {
    this.name= params['type'];
    this.type= params['name'];
    alert(this.type);
    alert(this.name);

 });

  }

Angular 라우터를 사용하지 않으면 querystring을 시도하십시오 . 설치

npm install --save querystring

프로젝트에. 구성 요소에서 이와 같은 작업을 수행하십시오.

import * as qs from 'querystring';
...
ngOnInit() {
   const params = qs.parse(window.location.search.substring(1));
   ...
}

는 substring(1)이 같은 경우 때문에 필요가 '/mypage?foo=bar'있을 것입니다에 대한 다음 키 이름을?foo