Angular Router getting param

서론

Angular를 사용하면서 Router(이하 라우터)를 사용하지 않는 개발자는 없을 것이다. 물론 Router를 사용하지는 않을 수 있겠지만 그렇게 되면 성능상 손해를 보게 될 것이다. 그 이유는 라우터를 사용하지 않고 페이지를 전환하게 되면 Angular의 특성상 lazy 로딩이 설정 되어 있지 않은 모든 모듈 및 컴포넌트를 로딩 하게 되는데 이것이 성능에 큰 손해를 주게 된다. 

이번 포스팅에서는 라우터를 사용 할 경우 URL에 있는 파라미터를 가져오는 방법에 대해서 설명하며 포스팅에서 사용한 Angular의 버전은 5버전이며 6버전 까지 나온 상태이다. 

라우터를 사용한 값 전달 및 가져오기

예를 들어 value1이라는 값을 전달하고 할 때 라우터를 사용하여 값을 전달 할 수 있는 방법은 두가지가 있다.
http://localhost:4200/test/value1 과 같이 경로에 값을 지정 할 수 있는 방법과 http://localhost:4200/test?value=value1 쿼리파람에 지정하는 방법이 있다. 이렇게 하였을 경우 값을 받아 오는 방법은 ActivatedRoute라는 클래스를 사용하여 받아 올 수 있다. 

1. http://localhost:4200/test/value1의 경우 값 가져오기

this.activatedRoute.params.subscribe(params => {
            this.value = params['value'];
            console.log(value)
 });

params에 value로 접근한 이유는 라우터 설정시 /test/:value라는 형식으로 설정했다는 가정하에 value라는 값으로 접근을 한 것이다. 만약 /test/:valueTest라고 라우터에 설정이 되어 있다면 params['valueTest']로 접근해야한다.

2. http://localhost:4200/test?value=value1의 경우 값 가져오기

this.route.queryParams
      .subscribe(params => {
        let value = params.value;
console.log(value)
      });

여기서 params의 value에 접근한 이유는 너무나도 당연하다. query param에 key값이 value이기 때문이다. 

1번과 2번을 자세히 살펴보면 같은 ActivatedRoute변수를 사용하지만 접근하는 값은 틀린 것을 확인 할 수 있다.
1번의 경우는 params라는 값에 접근하는 반면 2번의 경우는 queryParams라는 값에 접근하여 값을 가져오게 된다.