更新于2016-06-27: 不要使用Observables，而是使用以下两种方法：
- 按照@Abdulrahman的评论建议使用BehaviorSubject；
- 按照@Jason Goemaat的评论建议使用ReplaySubject。
Subject既是Observable（因此我们可以对其进行subscribe()），也是Observer（因此我们可以调用next()来发出新值）。 我们利用了这个特性。 Subject允许将值广播到多个观察者。我们没有利用这个特性（我们只有一个观察者）。
BehaviorSubject是Subject的一种变体。它具有“当前值”的概念。我们利用这个特性：每当我们创建一个ObservingComponent时，它会自动从BehaviorSubject获取当前导航项值。
下面的代码和plunker使用BehaviorSubject。
ReplaySubject是Subject的另一种变体。如果你想等到实际产生值，使用ReplaySubject(1)。而BehaviorSubject需要一个初始值（将立即提供），ReplaySubject则不需要。ReplaySubject始终提供最新的值，但由于它没有必需的初始值，因此服务可以在返回第一个值之前执行一些异步操作。它仍将立即在随后的调用中使用最新值进行触发。如果你只想要一个值，在订阅时使用first()。如果你使用first()，就不必取消订阅。
import {Injectable} from '@angular/core'
import {BehaviorSubject} from 'rxjs/BehaviorSubject';
@Injectable()
export class NavService {
private _navItemSource = new BehaviorSubject<number>(0);
navItem$ = this._navItemSource.asObservable();
changeNav(number) {
this._navItemSource.next(number);
}
}
import {Component} from '@angular/core';
import {NavService} from './nav.service';
import {Subscription} from 'rxjs/Subscription';
@Component({
selector: 'obs-comp',
template: `obs component, item: {{item}}`
})
export class ObservingComponent {
item: number;
subscription:Subscription;
constructor(private _navService:NavService) {}
ngOnInit() {
this.subscription = this._navService.navItem$
.subscribe(item => this.item = item)
}
ngOnDestroy() {
this.subscription.unsubscribe();
}
}
@Component({
selector: 'my-nav',
template:`
<div class="nav-item" (click)="selectedNavItem(1)">nav 1 (click me)</div>
<div class="nav-item" (click)="selectedNavItem(2)">nav 2 (click me)</div>`
})
export class Navigation {
item = 1;
constructor(private _navService:NavService) {}
selectedNavItem(item: number) {
console.log('selected nav item ' + item);
this._navService.changeNav(item);
}
}
Plunker
使用Observable的原始答案：（与使用BehaviorSubject相比，它需要更多的代码和逻辑，因此我不建议使用，但它可能是有益的）
所以，这里是一个使用Observable实现的方案，而不是EventEmitter。与我的EventEmitter实现不同，此实现还将当前选定的navItem存储在服务中，因此当创建观察组件时，它可以通过API调用navItem()检索当前值，然后通过navChange$ Observable通知更改。
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/share';
import {Observer} from 'rxjs/Observer';
export class NavService {
private _navItem = 0;
navChange$: Observable<number>;
private _observer: Observer;
constructor() {
this.navChange$ = new Observable(observer =>
this._observer = observer).share();
}
changeNav(number) {
this._navItem = number;
this._observer.next(number);
}
navItem() {
return this._navItem;
}
}
@Component({
selector: 'obs-comp',
template: `obs component, item: {{item}}`
})
export class ObservingComponent {
item: number;
subscription: any;
constructor(private _navService:NavService) {}
ngOnInit() {
this.item = this._navService.navItem();
this.subscription = this._navService.navChange$.subscribe(
item => this.selectedNavItem(item));
}
selectedNavItem(item: number) {
this.item = item;
}
ngOnDestroy() {
this.subscription.unsubscribe();
}
}
@Component({
selector: 'my-nav',
template:`
<div class="nav-item" (click)="selectedNavItem(1)">nav 1 (click me)</div>
<div class="nav-item" (click)="selectedNavItem(2)">nav 2 (click me)</div>
`,
})
export class Navigation {
item:number;
constructor(private _navService:NavService) {}
selectedNavItem(item: number) {
console.log('selected nav item ' + item);
this._navService.changeNav(item);
}
}
Plunker
此外，还可以参考组件交互菜谱示例，该示例除了使用可观察对象外，还使用了一个Subject。虽然示例是关于“父子通信”，但同样的技术也适用于不相关的组件。
