소개
애플리케이션을 빌드할 때, 라우트의 동작을 설명하기 위해 일부 인수나 매개변수를 전달하려는 시나리오가 있을 수 있습니다. Angular에서는 이를 쿼리 매개변수라고 하며, 이는 선택 사항입니다. 쿼리 매개변수는 필수 매개변수이며 하나의 라우트에만 바인딩되는 일반 라우트 매개변수와 혼동해서는 안 됩니다.
라우트 매개변수와 쿼리 매개변수의 차이점을 명확히 하기 위해, 제품을 저장하는 애플리케이션을 빌드하고 있다고 가정해 보겠습니다. 다음과 같이 product_id를 사용하여 특정 제품을 여는 라우트를 가질 수 있습니다. 또한 다음과 같이 쿼리 매개변수를 지정할 수도 있습니다: read_only. read_only가 true로 설정되면 사용자는 레코드만 볼 수 있는 반면, read_only가 false이면 사용자가 레코드를 편집할 수도 있습니다. 이렇게 하면 단 하나의 라우트만 사용하여 편집 및 보기 사용 사례를 모두 처리할 수 있습니다. 여기서 product_id는 라우트 매개변수이고, 선택 사항인 read_only는 쿼리 매개변수입니다..
전제 조건
이 글을 완전히 이해하려면 Angular를 사용한 애플리케이션 빌드에 익숙해야 합니다. Angular Router, RouterLink 및 ActivatedRoute를 사용해 본 경험도 도움이 됩니다.
Router.navigate로 쿼리 매개변수 전달하기
라우트 간을 이동하기 위해 Router.navigate를 사용하고 있다면, queryParams를 사용하여 쿼리 매개변수를 전송하십시오.
위의 예시에서 방문자가 인기도순으로 정렬된 제품 목록을 보게 하려면 아래 코드를 사용합니다:
|
1 2 3 4 5 6 |
navigateToProducts() { this.router.navigate( ['/products'], { queryParams: { order: 'popular' } } ); } |
이 코드를 사용하면 URL은 다음과 같이 변경됩니다:
|
1 |
http://localhost:4200/products?order=popular |
하지만 탐색할 때 여러 매개변수를 전달해야 하는 시나리오가 있을 수 있습니다. 예를 들어, 제품을 인기도순과 가격순으로 정렬하려면 아래 코드를 사용할 수 있습니다:
|
1 2 3 4 5 6 |
navigateToProducts() { this.router.navigate( ['/products'], { queryParams: { order: 'popular', price: 'high-to-low' } } ); } |
이번에는 URL이 다음과 같이 변경됩니다:
|
1 |
http://localhost:4200/products?order=popular&price=high-to-low |
이것으로 다음을 사용하여 쿼리 매개변수를 설정하는 방법을 마칩니다: queryParams.
queryParamsHandling을 사용하여 쿼리 매개변수 손실 방지하기
라우트 간을 이동할 때 매개변수가 손실되는 경향이 있습니다. 예를 들어, 인수 arg0를 전달하면 후속 라우팅이 발생할 때 전달되지 않습니다. 다음과 같이 queryParamsHandling을 사용하고 값을 preserve 또는 merge.
위의 예시에서, 방문자를 brands 페이지로 product에서 라우트 매개변수 { order: 'popular' }를 유지하면서 이동시키고 싶다고 가정해 봅시다. 이를 위해 다음과 같이 queryParamsHandling을 사용하고 이를 preserve :
|
1 2 3 4 5 6 |
navigateToBrand() { this.router.navigate( ['/brand'], { queryParamsHandling: 'preserve' } ); } |
이렇게 하면 URL은 다음과 같이 표시됩니다:
|
1 |
http://localhost:4200/users?brand=popular |
다음으로, 이전 라우트의 쿼리 매개변수인 { order: 'popular' } 을 유지하면서 새로운 매개변수인 { price: 'high-to-low' }를 추가하고 싶다고 가정해 봅시다. 다음과 같이 queryParamsHandling을 merge:
|
1 2 3 4 5 6 7 8 |
navigateToBrand() { this.router.navigate( ['/brand'], { queryParams: { price: 'high-to-low' }, queryParamsHandling: 'merge' } ); } |
위의 코드를 사용하면 URL은 다음과 같이 변경됩니다:
|
1 |
http://localhost:4200/brand?order=popular&price=high-to-low |
이것으로 다음을 사용하여 쿼리 매개변수를 보존하는 방법을 마칩니다: queryParamsHandling 을(를) 사용하여 보존하거나 병합합니다.
RouterLink로 쿼리 매개변수 전달하기
이전 링크를 고려하여, 이동하는 데 RouterLink 디렉티브를 사용하려면 다음과 같이 queryParams 을(를) 사용하여 쿼리 매개변수를 전달해야 합니다:
|
1 2 3 |
<a [routerLink]="['/products']" [queryParams]="{ order: 'popular' }"> 상품 </a> |
단방향 바인딩을 사용하여 어떻게 객체를 queryParams 에 전달하는지 확인해 보세요. 또한 전체 객체를 queryParams로 전달할 수도 있습니다. .
또한, 이후의 탐색에서도 이러한 쿼리 매개변수를 계속 유지하려면 queryParamsHandling 옵션을 사용할 수 있습니다. queryParamsHandling의 가능한 옵션은 merge 및 preserve입니다.:
|
1 2 |
<a [routerLink]="['/products']" [queryParams]="{ filter: 'new', order: 'popular' }" queryParamsHandling="merge">상품</a> |
지금까지 queryParams 전달 및 queryParamsHandling을(를) 통한 매개변수 처리를 RouterLink에서 어떻게 하는지 살펴보았습니다..
쿼리 매개변수 값 읽기
지금까지 라우트에서 쿼리 매개변수를 전달하는 방법을 배웠습니다. 이러한 매개변수는 선택 사항이며 대상 페이지에 일부 정보를 전달하는 데 사용되었습니다. 매개변수를 보내는 것도 중요하지만, URL에서 매개변수를 읽어와 사용하는 것도 필요합니다.
Angular에서는 ActivatedRoute 클래스를 사용하여 라우트 쿼리 매개변수를 읽습니다. ActivatedRoute은(는) 현재 URL의 매개변수를 노출하는 queryParams라는 옵저버블 프로퍼티를 가지고 있습니다.
다음과 같은 URL을 다룬다고 가정해 보겠습니다:
|
1 |
http://localhost:4200/products?order=popular |
코드에서 쿼리 매개변수 order에 접근하려면 아래 코드를 사용합니다:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
import { ActivatedRoute } from '@angular/router'; import 'rxjs/add/operator/filter'; @Component({ ... }) export class SampleComponent 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; }); } } |
여기서 콘솔을 보면 order 쿼리 매개변수의 값인 “popular를 확인할 수 있습니다.” 출력됩니다. 여러 개의 쿼리 매개변수가 있는 경우, queryParamMap 속성을 사용할 수 있으며, 이는 observable paramsMap 객체를 반환합니다.
다음과 같이 여러 개의 쿼리 매개변수가 있는 URL이 있는 경우:
|
1 |
http://localhost:4200/products?order=popular&price=high-to-low |
아래 코드를 사용하여 이러한 쿼리 매개변수에 액세스할 수 있습니다:
|
1 2 3 4 5 |
this.route.queryParamMap .subscribe((params) => { this.queryObj = { ...params.keys, ...params }; } ); |
여기서 object spread operator를 사용하면 아래와 같은 결과를 얻을 수 있습니다:
|
1 2 3 4 5 6 7 8 |
{ "0": "order", "1": "filter", "params": { "order": "popular", "price": "high-to-low" } } |
마지막으로, 결과 라우트에서 쿼리 매개변수에 액세스하는 방법을 이해할 수 있을 것입니다.
결론
이 튜토리얼에서는 쿼리 매개변수와 라우트 매개변수의 차이점을 살펴보았습니다. 또한 라우트 간에 인수를 쿼리 매개변수로 전달하고, queryParams 및 queryParamsHandling을 Router.navigate 및 RouterLink와 함께 사용하여 페이지에서 다시 가져오는 방법도 알아보았습니다. 또한 queryParams 및 queryParamMap을 ActivatedRoute.
Angular는 기본적으로 Javascript를 필요로 합니다. Javascript에 대한 지식을 더 넓히고 싶다면 다음 블로그를 확인해 보세요:
- JavaScript 작업하기: 클래스 작동 방식
- JavaScript 작업하기: 프로토타입 및 상속 작동 방식
- JavaScript: 문자열을 인덱싱, 분할 및 조작하는 방법에 대한 튜토리얼
즐거운 코딩 하세요!
댓글
아직 댓글이 없습니다. 첫 번째로 작성해 보세요.