Angular 라우터에서 쿼리 매개변수를 사용하는 방법
소개
Angular의 쿼리 매개변수를 사용하면 애플리케이션의 모든 경로에서 선택적 매개변수를 전달할 수 있습니다. 쿼리 매개변수는 하나의 경로에서만 사용할 수 있고 선택 사항이 아닌 일반 경로 매개변수(예: /product/:id
)와 다릅니다.
이 문서에서는 제품 목록을 표시하는 애플리케이션의 예를 참조합니다. 수신 구성 요소가 읽고 조치를 취할 수 있는 선택적 주문
및 가격 범위
값을 제공합니다. 제공된 값은 제품 목록의 정렬 및 필터링에 영향을 미칩니다.
전제 조건
이 자습서를 따르려면 다음이 필요합니다.
RouterLink
및ActivatedRoute
에 익숙해지면 도움이 될 수 있습니다.
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을 사용하여 쿼리 매개변수 보존 또는 병합
기본적으로 쿼리 매개변수는 후속 탐색 작업에서 손실됩니다. 이를 방지하기 위해 queryParamsHandling
을 preserve
또는 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
참고: preserveQueryParams
를 true
로 설정하여 달성하는 데 사용되는 쿼리 매개변수를 유지하지만 이제 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>
이제 queryParams
및 queryParamsHandling
이 RouterLink
와 함께 사용되는 방법을 이해했습니다.
쿼리 매개변수 값 액세스
선택적 쿼리 매개변수를 경로에 전달하는 방법을 알았으니 이제 결과 경로에서 이러한 값에 액세스하는 방법을 살펴보겠습니다. 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
값:
Outputpopular
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"
}
}
이제 queryParams
및 queryParamMap
을 사용하여 결과 경로의 값에 액세스하는 방법을 이해했습니다.
결론
이 기사에서는 다양한 예제를 사용하여 Angular에서 쿼리 매개변수를 설정하고 가져왔습니다. Router.navigate
및 RouterLink
를 통해 queryParams
및 queryParamsHandling
을 소개받았습니다. ActivatedRoute
와 함께 queryParams
및 queryParamMap
도 소개되었습니다.
Angular에 대해 자세히 알아보려면 연습 및 프로그래밍 프로젝트에 대한 Angular 주제 페이지를 확인하십시오.