Angular 5의 URL에서 쿼리 파라미터를 얻는 방법

Angular 5의 URL에서 쿼리 파라미터를 얻는 방법

angular 5.0.3을 사용하고 있는데 다음과 같은 쿼리 파라미터로 응용 프로그램을 시작하고 싶습니다./app?param1=hallo&param2=123Angular 2의 url에서 쿼리 매개 변수를 얻는 방법에 대한 힌트는 모두 나에게 효과가 없습니다.

쿼리 매개변수를 어떻게 사용할지 알고 계십니까?

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

이 프라이빗 함수는 파라미터를 취득하는 데 도움이 되지만 새로운 Angular 환경에서는 올바른 방법이 아닌 것 같습니다.

[update : ]메인 앱은

@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(이후 Angular 버전에서는 queryParamMap기타 답변도 참조해 주십시오.

::/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에 대해 이 질문을 우연히 접하게 된 여러분 모두를 위해.Docs를 인용하여 Activated Route에 대해 설명합니다.queryParams(기타 답변의 대부분은 이에 기초함):

두 개의 오래된 속성을 아직 사용할 수 있습니다.교체 제품보다 성능이 떨어지고 권장되지 않으며 향후 Angular 버전에서 더 이상 사용되지 않을 수 있습니다.

params : 루트에 고유한 필수 및 옵션 파라미터를 포함하는 관찰 가능.대신 paramMap을 사용합니다.

query Params : 모든 루트에서 사용 가능한 쿼리 파라미터를 포함하는 관찰 가능.대신 queryParamMap을 사용합니다.

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

constructor(private route: ActivatedRoute) { }

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

고급 컴포넌트 재사용 등 고급 방법에 대해서는 이 Docs 장을 참조하십시오.

편집:

아래 코멘트에 올바르게 기재되어 있듯이, 이 답변은 적어도 OP에 의해 지정된 경우에는 오답입니다.

OP는 글로벌쿼리 파라미터(/app?param1=hallo&param2=123)를 취득하도록 요구합니다.이 경우 queryParamMap을 사용해야 합니다(@dapperdan answer와 동일).

한편 paramMap은 루트에 고유한 파라미터(예: /app/:param1/:param2, 결과 /app/app/hallo/123이 생성됩니다.

지적해 주신 @Jason Royle과 @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;
  }

쿼리 및 경로 매개 변수(각도 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그런 다음 string이 URL을 angular로 인코딩하면 다음과 같은 결과가 나타납니다. https://myapp.com/user/666/read%3Fage%323 이상의 솔루션은 잘못된 결과를 제공합니다(queryParams는 비어 있으며 경로 끝에 있는 경우 경로 매개 변수를 마지막 경로 매개 변수에 붙여 넣을 수 있습니다).이 경우 탐색 방법을 다음과 같이 변경하십시오.

this.router.navigateByUrl(someUrl);

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; 
}

기타 옵션 보기 url에서 angular2의 쿼리 파라미터를 얻는 방법

유감스럽게도 가장 깨끗한 솔루션은 가장 확장성이 높은 솔루션이 아닙니다.최근 버전의 Angular에서는 ActivatedRoute Injectable을 사용하여 특히 스냅샷 속성 중 하나를 사용하여 쿼리 매개 변수를 쉽게 얻을 수 있는 것이 좋습니다.

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

또는 서브스크라이브 속성(쿼리 문자열이 갱신되는 경우, 예를 들어 사용자 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']
        }
    }
}

각도 라우터는 URL을 UrlTree로 해석하는 메서드 parseUrl(url: string)을 제공합니다.UrlTree 속성 중 하나는 queryParams입니다.다음과 같은 작업을 수행할 수 있습니다.

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

비슷한 솔루션을 찾고 있을 때 우연히 이 질문을 받았습니다만, 완전한 애플리케이션 레벨 라우팅이나 Import된 모듈 등 필요한 것은 없었습니다.

다음 코드는 내 용도에 적합하며 추가 모듈이나 Import가 필요하지 않습니다.

  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

검색 대상: 부모 컴포넌트가 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();
  }

}

심플한 솔루션

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

은 '아예'를 사용하는 입니다.ActivatedRoute:

    constructor(private route: ActivatedRoute) {}
    
    ngOnInit(): void {
        this.route.queryParams.subscribe((params) => {
         console.log(params);
         const queryparams = params['queryName'];
        });
    }

route 객체가 비어 있는 경우 주로 app.component.html에서 router-outlet을 사용하지 않기 때문입니다.

이것이 없으면 빈 서브오브젝트(특히 params 및 queryParams)가 아닌 의미 있는 루트 오브젝트를 얻을 수 없습니다.

「」를 추가해 .<router-outlet><router-outlet>하기 <app-main-component></app-main-component>

그 전에 app-routing >에서 쿼리 파라미터가 준비되어 있는지 확인합니다.이 파라미터는 App 컴포넌트에서 사용되는 Route 클래스를 내보냅니다.

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

물론 마지막으로, 당신의 매개 변수를 얻기 위해, 저는 개인적으로this.route.snapshot.params.dynamicParam여기서 dynamic Param은 앱 라우팅 컴포넌트에서 사용되는 이름입니다.

노선에 주의하세요."redirect To"는 쿼리 파라미터를 삭제합니다.

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

"/main?sq1=a&sq2=b"와 같은 쿼리 파라미터를 사용하여 메인 컴포넌트를 호출하여 리다이렉트 포워딩이 활성화되기 전에 메인 컴포넌트의 "ngOnInit()" 메서드로 쿼리 파라미터가 도착했다고 가정합니다.

하지만 이건 옳지 않아.리다이렉트가 앞에 와서 쿼리 파라미터를 드롭하고 쿼리 파라미터 없이 메인컴포넌트의 ngOnInit() 메서드를 호출합니다.

제 경로의 세 번째 줄을 바꿔서

{path: "", component: PageOneComponent},

이제 주요 컴포넌트 ngOnInit 및 PageOneComponent에서도 쿼리 파라미터에 접근할 수 있게 되었습니다.

우연히 같은 문제를 발견하게 되었습니다.여기서 대부분의 답은 Angular Internal Routing에 대해서만 해결되는 것 같습니다.그 중 일부는 요구 파라미터와 동일하지 않은 루트 파라미터에 대해서만 해결됩니다.

저는 Lars가 처음 질문한 것과 비슷한 사용 사례를 가지고 있다고 생각합니다.

예를 들어 소개 추적과 같은 사용 사례가 있습니다.

각도로 실행 중mycoolpage.com해시 루팅을 사용하는 경우mycoolpage.com리다이렉트mycoolpage.com/#/단, 다음과 같은 링크를 참조하십시오.mycoolpage.com?referrer=foo또한 사용할 수 있어야 합니다.안타깝게도 Angular는 즉시 요청 파라미터를 제거하여mycoolpage.com/#/.

빈 컴포넌트 + AuthGuard를 사용하여 취득하는 모든 종류의 '꼼수'queryParams또는queryParamMap아쉽게도 제겐 효과가 없었어요그들은 항상 비어 있었다.

저의 해답은 결국 이 문제를 작은 스크립트로 처리하는 것이었습니다.index.html요청 파라미터와 함께 완전한 URL을 가져옵니다.그런 다음 문자열 조작을 통해 요청 매개 변수 값을 가져와 창 개체에 설정합니다.그런 다음 별도의 서비스가 창 개체에서 ID를 가져오는 작업을 처리합니다.

index.discript 스크립트

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;
  }
}

이건 나한테 효과가 있었어.라우팅 모듈에서 자경로를 사용한 적이 있습니다.

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

/*
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 8:

ActivatedRoute.params에 의해 대체되었습니다.ActivatedRoute.paramMap ActivatedRoute.queryParams에 의해 대체되었습니다.ActivatedRoute.queryParamMap

Angular router try 를 사용하지 않을 경우 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

언급URL : https://stackoverflow.com/questions/47455734/how-to-get-query-parameters-from-url-in-angular-5