웹사이트 검색

Angular 라우터에서 쿼리 매개변수를 사용하는 방법


소개

Angular의 쿼리 매개변수를 사용하면 애플리케이션의 모든 경로에서 선택적 매개변수를 전달할 수 있습니다. 쿼리 매개변수는 하나의 경로에서만 사용할 수 있고 선택 사항이 아닌 일반 경로 매개변수(예: /product/:id)와 다릅니다.

이 문서에서는 제품 목록을 표시하는 애플리케이션의 예를 참조합니다. 수신 구성 요소가 읽고 조치를 취할 수 있는 선택적 주문가격 범위 값을 제공합니다. 제공된 값은 제품 목록의 정렬 및 필터링에 영향을 미칩니다.

전제 조건

이 자습서를 따르려면 다음이 필요합니다.

  • RouterLinkActivatedRoute에 익숙해지면 도움이 될 수 있습니다.

Router.navigate에서 쿼리 매개변수 사용

Router.navigate를 사용하여 명령적으로 경로를 탐색하는 경우 queryParams와 함께 쿼리 매개변수를 전달합니다.

이 예에서 방문자를 인기순으로 정렬된 목록이 있는 제품으로 라우팅하려는 경우 다음과 같습니다.

goProducts() {
  this.router.navigate(
    ['/products'],
    { queryParams: { order: 'popular' } }
  );
}

그러면 다음과 같은 URL이 생성됩니다.

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

여러 쿼리 매개변수를 제공할 수도 있습니다. 이 예에서 목록이 인기순으로 정렬되고 비싼 가격대로 필터링된 제품으로 방문자를 라우팅하려는 경우 다음과 같이 표시됩니다.

goProducts() {
  this.router.navigate(
    ['/products'],
    { queryParams: { order: 'popular', 'price-range': 'not-cheap' } }
  );
}

그러면 다음과 같은 URL이 생성됩니다.

http://localhost:4200/products?order=popular&price-range=not-cheap

이제 queryParams를 사용하여 쿼리 매개변수를 설정하는 방법을 이해했습니다.

queryParamsHandling을 사용하여 쿼리 매개변수 보존 또는 병합

기본적으로 쿼리 매개변수는 후속 탐색 작업에서 손실됩니다. 이를 방지하기 위해 queryParamsHandlingpreserve 또는 merge로 설정할 수 있습니다.

이 예에서 검색어 매개변수를 유지하면서 검색어 매개변수 { order: popular }가 있는 페이지에서 /users 페이지로 방문자를 라우팅하려면 다음을 사용합니다. 보존:

goUsers() {
  this.router.navigate(
    ['/users'],
    { queryParamsHandling: 'preserve' }
  );
}

그러면 다음과 같은 URL이 생성됩니다.

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

이 예에서 쿼리 매개변수 {를 전달하는 동안 쿼리 매개변수 { order: popular }가 있는 페이지에서 /users 페이지로 방문자를 라우팅하려는 경우 filter: new }, merge를 사용합니다:

goUsers() {
  this.router.navigate(
    ['/users'],
    {
      queryParams: { filter: 'new' },
      queryParamsHandling: 'merge' }
    );
}

그러면 다음과 같은 URL이 생성됩니다.

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

참고: preserveQueryParamstrue로 설정하여 달성하는 데 사용되는 쿼리 매개변수를 유지하지만 이제 queryParamsHandling을 위해 Angular 4+에서 더 이상 사용되지 않습니다.

이제 queryParamsHandling을 사용하여 쿼리 매개변수를 보존하고 병합하는 방법을 이해했습니다.

RouterLink와 함께 쿼리 매개변수 사용

이 예에서 대신 RouterLink 지시문을 사용하여 경로를 탐색하는 경우 다음과 같이 queryParams를 사용합니다.

<a
  [routerLink]="['/products']"
  [queryParams]="{ order: 'popular'}"
>
  Products
</a>

그리고 이 예에서 후속 탐색에서 쿼리 매개변수를 보존하거나 병합하려는 경우 다음과 같이 queryParamsHandling을 사용합니다.

<a
   [routerLink]="['/users']"
   [queryParams]="{ filter: 'new' }"
   queryParamsHandling="merge"
>
  Users
</a>

이제 queryParamsqueryParamsHandlingRouterLink와 함께 사용되는 방법을 이해했습니다.

쿼리 매개변수 값 액세스

선택적 쿼리 매개변수를 경로에 전달하는 방법을 알았으니 이제 결과 경로에서 이러한 값에 액세스하는 방법을 살펴보겠습니다. ActivatedRoute 클래스에는 현재 URL에서 사용할 수 있는 쿼리 매개변수의 관찰 가능 항목을 반환하는 queryParams 속성이 있습니다.

다음 경로 URL이 주어집니다.

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

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

// ...
import { ActivatedRoute } from '@angular/router';
import 'rxjs/add/operator/filter';

@Component({ ... })
export class ProductComponent implements OnInit {
  order: string;
  constructor(private route: ActivatedRoute) { }

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

        this.order = params.order;

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

콘솔 로그에서 params 개체를 볼 수 있습니다.

Output
{ order: "popular" }

그리고 params.order 값:

Output
popular

paramMap 개체와 함께 관찰 가능 항목을 반환하는 queryParamMap도 있습니다.

다음 경로 URL이 주어집니다.

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

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

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

우리는 여기서 개체 확산 연산자를 사용했으며 이것이 orderObj에 있는 데이터의 결과 모양입니다.

{
  "0": "order",
  "1": "filter",
  "params": {
    "order": "popular",
    "filter": "new"
  }
}

이제 queryParamsqueryParamMap을 사용하여 결과 경로의 값에 액세스하는 방법을 이해했습니다.

결론

이 기사에서는 다양한 예제를 사용하여 Angular에서 쿼리 매개변수를 설정하고 가져왔습니다. Router.navigateRouterLink를 통해 queryParamsqueryParamsHandling을 소개받았습니다. ActivatedRoute와 함께 queryParamsqueryParamMap도 소개되었습니다.

Angular에 대해 자세히 알아보려면 연습 및 프로그래밍 프로젝트에 대한 Angular 주제 페이지를 확인하십시오.