서비스

Observable 데이터

HeroService.getHeroes()(이 기사에서 말하면 heroProvider.getHeroes() 입니다)는 동기적인 메소드입니다.
현재, HeroesComponent에서도 동기적으로 취득할 수 있다는 상정으로 쓰여져 있습니다.
그러나 실제로는 이것으로는 안됩니다.
왜냐하면 HeroService.getHeroes는 서버 측에서 일부 데이터를 검색한다고 가정하기 때문입니다.
튜토리얼에서는 Observable을 반환합니다.
이것은, 나중에 히어로 데이터의 취득으로 이용하는 Angular 의 HttpClient.get() 메소드가 Observable 를 돌려주기 때문입니다.

Observable HeroService

HTTP 에 관한 장은 이제 조금 앞에 있으므로, 자세한 것은 여기에서는 나오지 않습니다.
이 장에서는 RxJS 라이브러리의 of() 함수를 사용해 서버로부터 데이터 취득하는 바람으로 합니다.

HeroesComponent의 Subscribe

HeroService.getHeroes()(heroProvider.getHeroes())를 Observable에 대응시키자.
아래와 같이 됩니다.

이제 Hero가 비동기적으로 얻을 수 있습니다. (표시는 변하지 않지만)

MessagesComponent 만들기

CLI에서 구성 요소를 만듭니다.

ionic generate component messages
app.html에 만든 것을 추가합니다.

app.module.ts에도 잊지 않고 추가해 둡시다.


우선 구성 요소가 하단에 추가되었는지 확인하십시오.

MessageService 만들기

그런 다음 MessageService를 만듭니다. (여기에서는 MessageProvider입니다)
ionic generate provider message

작성하면 아래와 같이 합니다.

HeroService에 주입

HeroService에 주입합니다.
아래와 같이 해보십시오.

이제 서비스에서 서비스를 사용할 준비가 되었습니다.

HeroService에서 메시지 보내기

getHeroes 메서드를 호출할 때 messageService에 메시지를 추가해 봅시다.

MessageService에 바인딩

html 측도 messageService를 이용할 수 있도록 변경해 둡니다.


아울러 messageComponent도 바꿔 둡니다.


아래와 같이 표시되어 있으면 성공입니다.