The code works for _collectionObserver although not for _itemObserver. What I am trying to achieve is share the selected item from AppComponent from where the DataService is called and display the selection in SelectItemComponent.
The code works up to the point in DataService until:
selectItem(item: TodoItem) { this._item = { Name: item.Name, Key: item.Key }; this._itemObserver.next(this._item); }
DataService
import { Injectable, Inject } from 'angular2/core'; import { Http, Response, Headers } from 'angular2/http'; import 'rxjs/add/operator/map'; import { Observable } from 'rxjs/Observable'; import { TodoItem } from './TodoItem'; import 'rxjs/add/operator/share'; @Injectable() export class DataService { public collection$: Observable<Array<TodoItem>>; private _collectionObserver: any; private _collection: Array<TodoItem>; private headers: Headers; public item$: Observable<TodoItem>; private _itemObserver: any; private _item: TodoItem; constructor( @Inject(Http) private http: Http) { this.http = http; this.headers = new Headers(); this.headers.append('Content-Type', 'application/json'); this._collection = new Array<TodoItem>(); this.collection$ = new Observable(observer => { this._collectionObserver = observer; }).share(); this.item$ = new Observable(observer => { this._itemObserver = observer; }).share(); } getItems() { this.http.get('/api/todo').map((res: Response) => res.json()) .subscribe((items: Array<TodoItem>) => { this._collection = items; this._collectionObserver.next(this._collection); }); } addItem(item: TodoItem) { this.http.post('/api/todo', JSON.stringify(item), { headers: this.headers }) .map((res: Response) => res.json()) .subscribe((data: TodoItem) => { this._collection.push(data); this._collectionObserver.next(this._collection); }); } selectItem(item: TodoItem) { this._item = { Name: item.Name, Key: item.Key }; this._itemObserver.next(this._item); } }
AppComponent
import { Inject, Component } from 'angular2/core'; import { DataService } from './data.service'; import { TodoItem } from './TodoItem'; import { AddItemComponent } from './add-item.component'; import { SelectItemComponent } from './select-item.component'; @Component({ selector: 'app', directives: [ AddItemComponent, SelectItemComponent ], templateUrl: 'templates/app.html' }) export class AppComponent { private items: Array<TodoItem> = new Array<TodoItem>(); private item: TodoItem; constructor(@Inject(DataService) public dataService: DataService) { } ngOnInit() { this.dataService.collection$.subscribe(latestCollection => { this.items = latestCollection; }); this.dataService.getItems(); } onSelect(item: TodoItem) { this.item = { Name: item.Name, Key: item.Key }; this.dataService.selectItem(this.item); } }
SelectItemComponent
import { Component, Inject } from 'angular2/core'; import { TodoItem } from './TodoItem'; import { DataService } from './data.service'; import { Observable } from 'rxjs/Observable'; @Component({ selector: 'select-item', templateUrl: 'templates/select-item.html' }) export class SelectItemComponent { public selectedItem: TodoItem; public item$: Observable<TodoItem>; private _itemObserver: any; constructor(@Inject(DataService) public dataService: DataService) { } ngOnInit() { this.dataService.item$.subscribe(latestItem => { this.selectedItem = latestItem; }); } }