[Angular] Angular 시작하기(local ver.) - (2)네비게이션 추가하기

https://angular.kr/start/start-routing

Angular 가이드

• 브라우저 주소 표시줄에 URL을 입력하면 해당 제품 화면으로 이동
• 싱글 페이지 애플리케이션에서 링크를 클릭하면 화면을 전환
• 브라우저의 "뒤로 가기", "앞으로 가기" 버튼을 누르면 브라우저 히스토리를 기반으로 이동

---

URL 경로와 컴포넌트 연결

 

이 애플리케이션에는 이미 Angular Router를 사용해 ProductListComponent로 화면을 전환하는 기능이 있음

지금은 상품의 상세정보 화면이동하는 라우팅 규칙을 추가

 

 

 

1. 상품의 상세정보를 표시하는 컴포넌트를 명령어로 생성

ng generate component product-details

잘 진행됐다면 이렇게 폴더와 파일이 자동 생성

 

 

2. app.module.ts 파일에 상품 상세정보에 해당하는 라우팅 규칙 추가

path는 products/:productId를 지정하고 component는 ProductDetailsComponent를 지정

점선으로 된 박스는 명령어로 컴포넌트를 만들어 자동 생성된 부분

 

 

3. product-list.component.html의 <a> 링크에 routerLink  추가 후 인자로 product.id 지정

RouterLink 디렉티브를 활용하면 <a> 엘리먼트를 커스터마이징 할 수 있음 

라우팅 경로는 /products라는 URL 세그먼트로 시작하고 마지막 세그먼트는 해당 상품의 id 프로퍼티 값이 할당

ex) 상품의 id 값이 1이라면 최종 URL은 http://localhost:4200/products/1

 

 

~화면 이동 확인~

---

상품 상세정보 표시하기

 

products 데이터와 라우팅 규칙을 결합해 특정 상품의 상세정보를 화면에 표시하기

 

 

1. product-details.component.ts 파일에 @angular/router 패키지로 제공되는 ActivatedRoute와 ..products 파일로 준비된 products 배열을 불러오기

 

 

 

2. product 프로퍼티 정의

 

 

3. 생성자 소괄호 안에 private route: ActivatedRoute를 추가해서 ActivatedRoute를 constructor() 안에 의존성으로 주입

ActivatedRoute는 Angular Router가 로드한 개별 컴포넌트에 대한 정보를 담고 있어서 이 객체를 참조하면 해당 컴포넌트가 표시될 때 사용된 라우팅 규칙이나 라우팅 인자를 확인할 수 있음

 

 

4. ngOnInit( ) 메서드 안에서 라우팅 인자로 전달된 productId를 참조하고 이 값에 해당하는 상품을 products 배열 안에서 찾음

라우팅 인자에 접근하기 위해서 route.snapshot을 사용하는데 route.snapshot은 ActivatedRouteSnapshot으로 활성화된 라우트(route)의 특정 시간에 해당하는 정보를 가지고 있음

라우트와 일치하는 URL은 productId를 제공

Angular는 상품의 고유한 세부정보를 표시하기 위해 productId를 사용

 

 

5. 상품의 상세정보 표시를 위해 ProductDetailsComponent 템플릿 수정

*ngIf를 사용해 해당 상품이 존재할 때만 <div> 엘리먼트가 렌더링되며 상세정보가 표시됨

<h4>{{ product.price | currency }}</h4> 코드의 product.price는 숫자 타입이지만 금액 형식으로 표현하기 위해 currency 파이프(HTML 템플릿에 표시되는 데이터의 형식을 조작할 때 사용) 사용

---

~화면 확인~

끗