Observable Angular 2의 데이터 사용

Question

먼저, 새로운 기술로 작업하는 동안 저와 같은 모든 지원 학습자 커뮤니티에 감사드립니다. 저는 Angular를 잠시 사용했습니다. 아직 이해가되지 않는 부분이나 다른 곳에서 요청한 부분이 있습니다.

내가 필요한 데이터로 Observable을 반환하는 서비스가 있다고 가정하면 성능면에서이 데이터를 어떻게 사용해야합니까?

1. 은 내가 비동기 파이프를 사용하고 하위/범인에 것을 방지 할 수 있습니다 알고 있지만 이것은 단지 템플릿에 발생합니다. 구성 요소에서 동일한 데이터를 사용해야하는 경우에는 어떻게해야합니까? 다시 구독하지 않을 것입니다 (템플릿에서 async 파이프가 있고 .subscribe()가있는 구성 요소에서)?

2. 관찰 대상을 최신 상태로 유지하려면 어떻게해야합니까? 예를 들어 API의 데이터를 표시하는 표가 있습니다. 두 번째 페이지 (페이지 매김)를 클릭하면 다른 전화를 걸고 관찰 내용이 업데이트됩니다.

이전에 물어 본 경우 죄송합니다. 개인적으로 Stackoverflow에서 찾을 수 없습니다. 주목 해 주셔서 감사합니다!

Answer 1

1. 구성 요소에 데이터가 필요하면 그냥 구독 할 수 있습니다. 하지만 어쩌면 당신은 (아래 참조) 안 ...

2. 이 거기 당신이 연산자를 사용하는 것이, 사용자 정의 데이터 흐름 정의하는 관찰 가능한 결합 할 수 있습니다 :

foo$: Observable <Foo[]> ; 
randomClickEvent = new Subject <clickEvent>(); 

ngOnInit() { 
    let initialFetch = this.fooService.getData().share() 
    this.foo$ = Observable.merge(
     initialFetch, // need the initial data 
     initialFetch.flatMap(foos => { 
     this.randomClickEvent.switchMap(() => { //listen to click events 
      return this.fooService.getMore().map((moreFoos: Foo[]) => { //load more foos 
      return foos.concat(...moreFoos) //initial foos values + new ones 
      }) 
     }) 
     }) 
    ); 
    } 

<span *ngFor="let foo of (foo$|async)">{{foo.name}}</span> 
<button (click)="randomClickEvent.next($event)">Load More foos !</button> 

을

대부분의 사람들은 map(), do() 등과 같은 단순한 연산자를 사용하고 필수적으로 구독을 관리하지만 일반적으로 구독하지 않는 것이 좋습니다. 따라서 많은 부작용과 일부 Ooops를 피할 수 있습니다. 구독 취소하는 것을 잊었습니다. 여기 ". 일반적으로 구독하지 않고 필요한 모든 것을 할 수 있습니다.

관찰 가능 항목은 데이터 흐름을 설명하기 위해 존재하지만 그 이상은 아무것도 아닙니다. 그것은 기능 프로그래밍의 패러다임입니다 : 당신은 일들이 어떻게 이루어지는 지 정의하지 않습니다. 여기에서 this.foo$은 초기 fooService.getData()과 발생할 수있는 fooService.fetchMore()의 조합입니다.