[angular] Angular 2 서비스에서 Observable 생성 및 반환

업데이트 : 9/24/16 Angular 2.0 안정

이 질문에 여전히 많은 트래픽이 발생하므로 업데이트하고 싶습니다. 알파, 베타 및 7 명의 RC 후보에서 온 광기의 변화로 인해 SO 응답이 안정적으로 유지 될 때까지 SO 답변 업데이트를 중단했습니다.

이것은 Subjects 와 ReplaySubjects 를 사용하기에 완벽한 경우입니다.

나는 개인적으로 사용하는 것을 선호 ReplaySubject(1)가 신규 가입자는 경우에도 늦게 연결할 때 마지막으로 저장된 값이 전달 될 수 있도록 같이

let project = new ReplaySubject(1);

//subscribe
project.subscribe(result => console.log('Subscription Streaming:', result));

http.get('path/to/whatever/projects/1234').subscribe(result => {
    //push onto subject
    project.next(result));

    //add delayed subscription AFTER loaded
    setTimeout(()=> project.subscribe(result => console.log('Delayed Stream:', result)), 3000);
});

//Output
//Subscription Streaming: 1234
//*After load and delay*
//Delayed Stream: 1234

따라서 늦게 연결하거나 나중에로드해야하는 경우에도 항상 최신 전화를받을 수 있으며 콜백 누락에 대해 걱정하지 않아도됩니다.

또한 동일한 스트림을 사용하여 아래로 푸시 할 수 있습니다.

project.next(5678);
//output
//Subscription Streaming: 5678

그러나 100 % 확신한다면 한 번만 전화하면됩니까? 열린 주제와 관찰 가능 항목을 남겨 두는 것은 좋지 않지만 항상 “What If?”

그것이 AsyncSubject 가 들어오는 곳 입니다.

let project = new AsyncSubject();

//subscribe
project.subscribe(result => console.log('Subscription Streaming:', result),
                  err => console.log(err),
                  () => console.log('Completed'));

http.get('path/to/whatever/projects/1234').subscribe(result => {
    //push onto subject and complete
    project.next(result));
    project.complete();

    //add a subscription even though completed
    setTimeout(() => project.subscribe(project => console.log('Delayed Sub:', project)), 2000);
});

//Output
//Subscription Streaming: 1234
//Completed
//*After delay and completed*
//Delayed Sub: 1234

대박! 우리가 주제를 닫았지만 마지막으로로드 한 것으로 여전히 대답했습니다.

또 다른 것은 우리가 그 http 호출에 가입하고 응답을 처리하는 방법입니다. 지도 는 응답을 처리하기에 좋습니다.

public call = http.get(whatever).map(res => res.json())

그러나 우리가 그 전화를 중첩시켜야한다면 어떨까요? 네, 특별한 기능을 가진 피사체를 사용할 수 있습니다 :

getThing() {
    resultSubject = new ReplaySubject(1);

    http.get('path').subscribe(result1 => {
        http.get('other/path/' + result1).get.subscribe(response2 => {
            http.get('another/' + response2).subscribe(res3 => resultSubject.next(res3))
        })
    })
    return resultSubject;
}
var myThing = getThing();

그러나 그것은 많고 그것을 수행하는 기능이 필요하다는 것을 의미합니다. FlatMap 입력 :

var myThing = http.get('path').flatMap(result1 =>
                    http.get('other/' + result1).flatMap(response2 =>
                        http.get('another/' + response2)));

Sweet var는 최종 http 호출에서 데이터를 가져 오는 관측 가능 항목입니다.

좋아요, 훌륭하지만 angular2 서비스를 원합니다!

나는 당신을 얻었다 :

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { ReplaySubject } from 'rxjs';

@Injectable()
export class ProjectService {

  public activeProject:ReplaySubject<any> = new ReplaySubject(1);

  constructor(private http: Http) {}

  //load the project
  public load(projectId) {
    console.log('Loading Project:' + projectId, Date.now());
    this.http.get('/projects/' + projectId).subscribe(res => this.activeProject.next(res));
    return this.activeProject;
  }

 }

 //component

@Component({
    selector: 'nav',
    template: `<div>{{project?.name}}<a (click)="load('1234')">Load 1234</a></div>`
})
 export class navComponent implements OnInit {
    public project:any;

    constructor(private projectService:ProjectService) {}

    ngOnInit() {
        this.projectService.activeProject.subscribe(active => this.project = active);
    }

    public load(projectId:string) {
        this.projectService.load(projectId);
    }

 }

나는 관찰자와 관찰자의 열렬한 팬이므로이 업데이트가 도움이되기를 바랍니다.

원래 답변

나는 이것이 사용하는 사용 사례라고 생각 관찰 가능한 주제 나에 Angular2을 EventEmitter.

서비스에서 EventEmitter값을 푸시 할 수있는를 작성 하십시오. Alpha 45 에서는 로 변환해야 toRx()하지만 그것들을 제거하기 위해 노력하고 있다는 것을 알고 있으므로 Alpha 46 에서는 단순히을 반환 할 수 있습니다 EvenEmitter.

class EventService {
  _emitter: EventEmitter = new EventEmitter();
  rxEmitter: any;
  constructor() {
    this.rxEmitter = this._emitter.toRx();
  }
  doSomething(data){
    this.rxEmitter.next(data);
  }
}

이 방법에는 EventEmitter다른 서비스 기능이 적용 할 수 있는 단일 기능이 있습니다.

호출에서 직접 관찰 가능 항목을 반환하려면 다음과 같이 할 수 있습니다.

myHttpCall(path) {
    return Observable.create(observer => {
        http.get(path).map(res => res.json()).subscribe((result) => {
            //do something with result. 
            var newResultArray = mySpecialArrayFunction(result);
            observer.next(newResultArray);
            //call complete if you want to close this stream (like a promise)
            observer.complete();
        });
    });
}

구성 요소 에서이 작업을 수행 할 수 있습니다.
peopleService.myHttpCall('path').subscribe(people => this.people = people);

그리고 서비스 호출 결과를 엉망으로 만듭니다.

EventEmitter다른 구성 요소에서 스트림에 액세스 해야하는 경우를 대비하여 자체 스트림을 만드는 것이 좋지만 두 가지 작동 방식을 모두 볼 수 있습니다 …

다음은 이벤트 이미 터가있는 기본 서비스를 보여주는 플런저입니다 : Plunkr

답변

import {Injectable} from 'angular2/core'
import {Subject}    from 'rxjs/Subject';
@Injectable()
export class MissionService {
  private _missionAnnouncedSource = new Subject<string>();
  missionAnnounced$ = this._missionAnnouncedSource.asObservable();

  announceMission(mission: string) {
    this._missionAnnouncedSource.next(mission)
  }
}

    import {Component}          from 'angular2/core';
    import {MissionService}     from './mission.service';

    export class MissionControlComponent {
      mission: string;

      constructor(private missionService: MissionService) {

        missionService.missionAnnounced$.subscribe(
          mission => {
            this.mission = mission;
          })
      }

      announce() {
        this.missionService.announceMission('some mission name');
      }
    }

public fetchModel(uuid: string = undefined): Observable<string> {
      if(!uuid) { //static data
        return Observable.of(new TestModel()).map(o => JSON.stringify(o));
      }
      else {
        return this.http.get("http://localhost:8080/myapp/api/model/" + uuid)
                .map(res => res.text());
      }
    }

import {of,  Observable } from 'rxjs';
import { map } from 'rxjs/operators';
[...]
public fetchModel(uuid: string = undefined): Observable<string> {
      if(!uuid) { //static data
        return of(new TestModel());
      }
      else {
        return this.http.get("http://localhost:8080/myapp/api/model/" + uuid)
                .pipe(map((res:any) => res)) //already contains json
      }
    }

people(hairColor: string): Observable<People> {
   this.url = "api/" + hairColor + "/people.json";

   return Observable.create(observer => {
      http.get(this.url)
          .map(res => res.json())
          .subscribe((data) => {
             this._people = data

             observer.next(this._people);
             observer.complete();


          });
   });
}

private _peopleObservable: Observable<people>;

constructor(private peopleService: PeopleService){}

getPeople(hairColor:string) {
   this._peopleObservable = this.peopleService.people(hairColor);

   this._peopleObservable.subscribe((data) => {
      this.people = data;
   });
}

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { of } from 'rxjs/observable/of';

@Injectable()
export class ClientListService {
    private clientList;

    constructor() {
        this.clientList = [
            {name: 'abc', address: 'Railpar'},
            {name: 'def', address: 'Railpar 2'},
            {name: 'ghi', address: 'Panagarh'},
            {name: 'jkl', address: 'Panagarh 2'},
        ];
    }

    getClientList () {
        return Observable.of(this.clientList);
    }
};

this.clientListService.getClientList().subscribe(res => this.clientList = res);

http.get('api/people.json')
  .map(res => res.json())
  .map(peopleData => peopleData.map(personData => new Person(personData)))