라우터 파라미터

Angular Router는 Angular의 핵심기능 중 하나인데 여기서 파라미터를 보내는 방법을 작성하겠다.

라우터를 선언하는 부분은 다음과 같이 가정하고

{ path: 'move/:param', component: MoveComponent },

하면 template나 component에서는 다음과 같이 사용할 것이다.

template

<a [routerLink]="['/move', param]"> 이라하고 param값을 넣어주면 :param에 값이 전달되는 식이다.

<a routerLink="/move/:param">

component

this.router.navigate(['/move', param]);

그리고 받는쪽에서는 다음과 같이 사용할 것이다. (여러가지 방법이 있음 )

// 방법1

this.activatedRoute.params.subscribe(

params => {

this.sq = params['param'];

}

);

// 방법2

// this.activatedRoute.

// .subscribe(params => this.sq = +params.get('param'));

// 방법3

this.sq = +this.activatedRoute.snapshot.paramMap.get('param');

이런식으로 주고받는데 이런식으로 보내게 된다면 라우트를 할 때 url에 파라미터가 노출이 되는 단점이 있다.

예를들어 위의 소스는 아래의 url처럼 될 것이다

http://localhost:8080/move/34

이것은 일방적인 파라미터를 주고받는 과정이고 쿼리 파라미터를 보낼 때는 또 다르다.

쿼리파람 관련글은 다음에 작성하겠다.

참조 : https://angular-2-training-book.rangle.io/handout/routing/query_params.html