更新2016-06-27：代替使用Observables
- @Abdulrahman在评论中建议的BehaviorSubject，或者
- @Jason Goemaat在评论中建议的ReplaySubject
一个Subject既是一个Observable（因此我们可以subscribe()做到）又是Observer（因此我们可以调用next()它以发出新值）。我们利用此功能。主题允许将值多播到许多观察者。我们不会利用此功能（我们只有一个观察者）。
BehaviorSubject是Subject的变体。它具有“当前值”的概念。我们利用这一点：每当创建ObservingComponent时，它都会自动从BehaviorSubject获取当前的导航项值。
下面的代码和插件使用BehaviorSubject。
ReplaySubject是Subject的另一个变体。如果要等到实际生成一个值，请使用ReplaySubject(1)。BehaviorSubject需要一个初始值（将立即提供），而ReplaySubject则不需要。ReplaySubject将始终提供最新值，但是由于它没有必需的初始值，因此该服务可以在返回其第一个值之前执行一些异步操作。它仍将立即在具有最新值的后续调用中触发。如果只需要一个值，请first()在订阅上使用。如果使用，则不必取消订阅first()。
import {Injectable} from '@angular/core'
import {BehaviorSubject} from 'rxjs/BehaviorSubject';
@Injectable()
export class NavService {
// Observable navItem source
private _navItemSource = new BehaviorSubject<number>(0);
// Observable navItem stream
navItem$ = this._navItemSource.asObservable();
// service command
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() {
// prevent memory leak when component is destroyed
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();
// share() allows multiple subscribers
}
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
另请参阅Component Interaction Cookbook示例，该示例Subject除了可观察对象之外还使用a 。尽管该示例是“父母与孩子之间的交流”，但相同的技术适用于无关的组件。