Angular 쿼리파람

Angular든 다른 언어이든 파라미터를 보내는 방식들이 있다.

예를들어

1) http://localhost:8080/mydata/3

2) http://localhost:8080/mydata?sq=3

두가지의 url이 있다고 가정하면 

1번의 경우 path로 data를 분류하는 방법이고 

2번의 경우에는 key와 value의 형태로 데이터를 분류하는 방식이다.

Java의 Spring은 @PathVariable과 @RequestParam의 차이라 할까?

1번의 경우 저번에 작성한 글을 참조하면 되고 이번에는 2번의 경우를 작성할 것이다.

2번의 경우를 Angular에서는 Query Parameter라고 불리는는데 위에 언급한 것처럼 라우터에 데이터를 보낼 때 path의 경로가 아닌 key 값으로 데이터를 보내고 받을 수 있다.

이 역시 Template와 ts파일에서보내는법이 있다.

 // Template에서 보내는 방법
<a [routerLink]="['mydata']" [queryParams]="{ sq: 3 }">3번 데이타 전송</a>

// ts파일에서
goPage(dataSq) {
    this.router.navigate(['/mydata'], { queryParams: { sq: 3 } });  // private router: Router
}

이런식으로 사용하고 받을 때는 

this.route.queryParams.subscribe(params => {      // private route: ActivatedRoute
 		this.sq = params['sq'] // 3  
});

이런식으로 받으면 된다.

참조: https://angular.io/guide/router#query-parameters