이전 포스트에서는 routerLink로 코드 경로 이동을 해왔습니다.
템플릿 이외의 컴포넌트의 코드에서는 어떤 식으로 라우팅을 해야 할까요?
이번 포스트는 아래 내용을 다루고 있습니다.
- 코드에서 라우팅이 필요한 케이스
- Router서비스, navigate메소드 사용하기
영화 상세페이지가 아래와 같이 있습니다.
상세페이지에서 영화 목록 페이지로 다시 이동하는 <뒤로가기> 버튼을 추가 하려고 합니다.
이전에 했던 것처럼 템플릿에서 routerLink의 디렉티브를 사용해서 경로를 이동 할수 있습니다.
하지만 컴포넌트 안에서의 코드로 라우팅 하는 것도 가능합니다.
코드에서 라우팅이 필요한 케이스
어떠한 경우 템플릿의 routerLink대신 코드를 사용해서 라우팅 해야 할까요?
예를 들어 저장 버튼을 생각해 보세요.
유저가 저장버튼을 누르때, 데이터가 저장된후 완료 페이지로 이동해야 하는 경우에는 routerLink만으론 해결하기 어려울 것입니다.
코드로 라우팅을 하기 위해 Router서비스를 사용합니다.
그리고 Router인스턴스의 navigate메소드를 사용해서 경로를 이동합니다.
navigate 메소드 사용하기
이제 템플릿에서 버튼을 만들고, 컴포넌트에서 경로가 변경되도록되도록 수정하겠습니다.
MovieDetailComponent클래스가 생성되면 ActivatedRoute서비스와 Router서비스의 인스턴스를 얻게 됩니다.
goToList메소드에서는 Router서비스의 인스턴스를 이용해서 navigate메서드를 호출해 주고 있습니다.
화면이 이동할 때 매개변수가 필요하지 않으므로 naivgate메서드 호출 시 경로의 문자열만 배열에 넣어주고 있습니다.
템플릿에서는 버튼을 마크업 해주었고, click이벤트에 goToList메서드를 바인딩 해주었습니다.
이제 브라우저에서 확인해 보도록 하겠습니다.
코드상에서 navigate을 이용한 경로 변환이잘 작동하네요.
수고하셨습니다.
다음 포스트에서는 라우트 가드에 대해 알아보겠습니다.
함께 읽으면 좋은 글
앵귤러 기초(Angular basic) 26. 라우팅, 메뉴 만들기
라우팅 모듈에 계속해서 RouterLink를 사용해서 라우팅 하는 애플리케이션을 완성해 보겠습니다. 지난 포스트와 내용적으로 이어지니 참고해 주세요. 이번 포스트는 아래 내용을 다루고 있습니다.
nayotutorial.tistory.com
'프로그래밍 > Angular' 카테고리의 다른 글
| 앵귤러 기초(Angular basic) 30. 앵귤러 모듈(Angular Module) (0) | 2022.02.10 |
|---|---|
| 앵귤러 기초(Angular basic) 29. 라우트 가드(route guard) (0) | 2022.02.08 |
| 앵귤러 기초(Angular basic) 27. 라우팅 파라미터 건네기 (0) | 2022.02.07 |
| 앵귤러 기초(Angular basic) 26. 라우팅, 메뉴 만들기 (0) | 2022.02.04 |
| 앵귤러 기초(Angular basic) 25. 라우팅 모듈 (0) | 2022.02.04 |
댓글