5. Typescript Basic, Service class
Angular入門 未経験から1ヶ月でサービス作れるようにする その5. サービスとTypescriptの基礎 - Qiita
前回は、 Angularでのデータ管理の基礎（モデル作成） HTMLでの分岐(*ngIf) HTMLでのループ(*ngFor) を学びました。 本記事では、 ES6とTypescriptの基礎 Typescriptの...
qiita.com
Angula에서의 데이터관리 기초
API엑세스나 컴포넌트를 걸친 데이터관리를 함.
ProductService 클래스를 통해 Product의 데이터관리를 컴포넌트 밖으로 내보내보자고.
＠Injectable
서비스클래스로 지정해줌.
4~root차원에서 이 서비스를 이용하는 것을 의미.
서비스클래스는 지정한 provideIn단위로 인스턴스화되어 (이번엔 root레벨, 즉 프로젝트 전체) 하나의 인스턴스가 사용됨. 소위말하는 싱글턴에 가까운 상태라고 생각하는 것이 좋을 것 같음.
최종적으로는 여기에서 API접근을 하게되지만 지금은 일단 패스.
import등 단축키 Shft Alt .
list()는 Observable한 Product의 배열을 반환하는 메서드가 됨.
본 코드는 API통신이 없으므로 동기처리가 되지만 최종적으로는 API통신을 할것이기 때문에 list()메소드는 비동기처리가 됨.
Angular는 비동기처리에 RxJS를 이용함. Observable이라는것은 RxJS의 클래스며 비동기처리에 있어서 메인클래스가 됨. 아직은 Promise와 같은 것이라고 생각하면 될 것 같음.
of라는 것은 RxJS의 메소드고, 주어진 내용으로 Observable을 만드는 것임.
product-list.component.ts 의 constructor
contructor에서 ProductService인수 호출함으로써 ProductService를 컴포넌트나 서비스에 삽입할 수 있음(이른바 DI)
즉 이 코드로 ProductListComponent에 productService라고 하는 변수가 생성된 것임.
this.productService.list()는 Observable<Product[]>을 반환.
subscribe는 Observable의 메서드이며, 타겟 Observable의 관측을 시작하는 것. (API엑세스의 비동기 처리를 개시)
관측이 완료되면 subscribe의 인수의 콜백메소드가 호출됨. 이 인수는 Observable<Product[]>의 Product[]가 들어가게 됨.
ProductService의 list()메소드에서 반환된 배열이 이 메소드에 들어가게 됨. 그리고 products 인스턴스 변수에 대입되고
products를 표시하도록 기재돼있는 View에 반영 됨.
product-detail.component.ts로부터 ProductService 이용
ProductService에 id로 상품을 취득할수있는 메소드를 추가
product-detail.component.ts에서 이용