7. URL 파라미터 이용

원문

Angular入門 未経験から1ヶ月でサービス作れるようにする その6.5 URLパラメータの利用とここまで

---

리스트 표시, 상세, 편집화면으로의 화면전환 추가

1. 마우스 호버의 취득

마우스호버상태 취득은 mouseenter, mouseleave 두가지 이벤트를 취득하는 것으로 구현해보겠음.

우선 이 두가지 이벤트가 발생할 때 실행되는 메서드를 component에 추가한다.

HTML상에서 각 상품리스트 위에 mouseenter, mouseleave 이벤트를 취득하여 추가한 메서드를 호출하도록 해보자.

이로써 각 리스트에 마우스가 호버됐을 때, 안됐을 때에 반응하는 이벤트를 취득할수 있게 되었다.

2. 호버상태의 저장

마우스 커서는 하나밖에없기때문에 호버도 하나밖에 불가능함.

그래서 hoverdProduct와 같은 변수를 준비하고 그 변수에 호버되어있는 요소를 넣어두는 방법도 가능함.

이러한 리스트의 요소는 호버이외에도 여러가지 상황에 맞게, 모델에는 데이터로서 저장이 안되어있지만 화면상에 추가하여 데이터를 가지고 싶은 경우가 자주 있다.

그렇기때문에 아래와 같은 방법으로 호버상태를 저장해보겠다. 이것은 화면을 위한 Product를 확장한 클래스를 준비하는 것이다.

위 클래스는 Product 클래스를 게승하고있기때문에 Product의 요소를 가지고 있고, 동시에 hovered라는 호버되어있는지의 여부의 상태도 갖도록 하고있다.

Typescript에서의 계승
Java등의 일반적인 객체지향언어와 같은 계승이다.
간단히 말해, 인스턴스 변수, 인스턴스메소드를 계승하면서 새로운 변수나 메서드를 추가하고 싶을때 사용하는 구현수단이다.

ngOnInit 추가코드 설명

먼저 map을 사용하고있다. products.map로 호출하고있는 메서드를 보면 조금 특수하게 쓰고있다.

Typescript의 특수한 작성법으로 . . .은 spread operator라고 한다. (공식이름은 없음)

여기서는 product에 hovered:false를 추가하고있다는 의미로 쓰임.

이 작성법에 함정이 있다.

products는 Product 클래스의 인스턴스 였다. 그러나 Spread Operator에 의해 확장된 객체는 ProductlistElement클래스의 인스턴스가 되지 않는다. 그냥 객체가 된다.

객체와 인스턴스의 차이

• 개념적으로 인스턴스는 객체에 포함됨.
• 객체: 소프트웨어 세계에 구현할 대상
• 클래스: 구현하기위한 설계도
• 인스턴스: 소프트웨서 세계에 구현된 실체
• 클래스를 바탕으로 객체를 SW에 실체화 하는 과정이 인스턴스화고 실체화된 인스턴스는 메모리에 할당된다.

이번 케이스는 신경쓰지않고 작성하겠지만 사용에는 주의바란다.

product-list.component.html

상대패스가 product.id가 되는 것으로 product.id가 1 이면 /products/1로 이동함

---

ActivatedRoute 

상세화면, 편집화면에서 URL파라미터로부터 어느 상품인지 판단하도록 하기위해 URL로부터 ID를 취득하여 그 product의 정보를 표시하도록 해보자. URL의 정보를 취득하기 위해 ActivatedRoute를 이용한다.

ActivatedRoute로부터 취득할수있는 URL의 요소는 대표적으로 params와 queryParams다.

params(Observable형)는 Route에서 설정한 파라미터를 취득함.

queryParams(Observable형)는 루트에서 설정하지않은 URL쿼리를 취득함.

app-routing.module.ts

위의 :id가 파라미터에 해당됨. URL에서 이 :id를 취득하기 위해 사용하는 것이 params임.

queryParams는 예를 들어 http://localhost:4200/products/1?test=1&hoge=12 와 같은 URL의 쿼리파라미터인 test=1 , hoge=12를 취득할때 사용함.

this.route.params는 Observable<Params>을 반환함. 관측가능하다는 것은 예를들어 URL파라미터가 다른 장소에서 변경되면 그 값을 취득할수 있다는 의미임. 즉, 변경을 감지해 this.productService.get(params['id'])가 재실행되므로 URL이 변경되어도 표시하고 싶은 것을 유지할수 있음.

한번 외우면 편리함.

---

편집화면 변경

---