[angular] 라우터 기본과 parameter 값 가져오기

회사에서 일을 하거나 프로젝트를 할 때 router를 많이 사용한다. angular router는 브라우저가 제공하는 URL기능을 활용하여 현재 뷰의 상태를 저장하고 조회 할 수 있는 API를 제공한다.

간단한데 맨날 까먹어서......또 적어둔다....👏🏻

html 쪽에서 routerLink 를 통해 간단하게 이동할 수도 있고

<a routerLink="/coupon-upload/menu-temp/{{user_idx}}/{{menu_temp_idx}}">Heroes</a>

component 쪽에서도 이런식으로 이동할 수 있다.

this.router.navigateByUrl(`coupon-upload/menu-temp/${user_idx}/${menu_temp_idx}`); 

이동을 할 컴포넌트 module에는 이렇게 path를 등록해줘야한다. :user_idx 이런식으로 사용한 것은 parameter를 의미한다. 값을 주고 받을 수 있다. 앞에서 ${user_idx} 요렇게 컴포넌트의 값을 보냈다.

  {
    path     : 'coupon-upload/menu-temp/:user_idx/:menu_temp_idx',
    component: MenuTempComponent
  },

이동을 당한 컴포넌트쪽에선 보낸 파라미터 값을 읽을 수 있다.

const params = this.route.snapshot.params;
const user_idx = params.user_idx;
const menu_temp_idx = params.menu_temp_idx;

console.log(user_idx)
console.log(menu_temp_idx)

이렇게 하면 간단하게 angular router를 이용해서 간단하게 값을 보내고 받을 수 있다.

앵귤러 첫걸음 책 참조 📚