Ответ 1
ОБНОВЛЕНИЕ: 24.09.16 Angular 2.0 Стабильный
Этот вопрос по-прежнему получает много трафика, поэтому я хотел его обновить. Из-за безумия изменений от кандидатов в Alpha, Beta и 7 RC я прекратил обновлять свои ответы 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% уверены, что вам нужно сделать звонок только один раз? Оставлять открытые темы и наблюдаемые вещи нехорошо, но всегда есть что, "Что если?"
Это где 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)));
Милый, 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);
}
}
Я большой поклонник наблюдателей и наблюдаемых, поэтому я надеюсь, что это обновление поможет!
Оригинальный ответ
Я думаю, что это использование случай использования Observable Subject или в 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