委托:Angular中的EventEmitter或Observable

Plunker

另请参阅Component Interaction Cookbook示例,该示例Subject除了observable之外还使用了它.虽然该示例是"父母和子女的交流",但相同的技术适用于不相关的组件.

突发新闻:我添加了另一个使用Observable而不是EventEmitter的答案.我建议回答这个问题.实际上,在服务中使用EventEmitter是不好的做法.

原答案:(不要这样做)

将EventEmitter放入一个服务中,该服务允许Obse​​rvingComponent直接订阅(和取消订阅)该事件:

import {EventEmitter} from 'angular2/core';

export class NavService {
  navchange: EventEmitter = new EventEmitter();
  constructor() {}
  emit(number) {
    this.navchange.emit(number);
  }
  subscribe(component, callback) {
    // set 'this' to component when callback is called
    return this.navchange.subscribe(data => call.callback(component, data));
  }
}

@Component({
  selector: 'obs-comp',
  template: 'obs component, index: {{index}}'
})
export class ObservingComponent {
  item: number;
  subscription: any;
  constructor(private navService:NavService) {
   this.subscription = this.navService.subscribe(this, this.selectedNavItem);
  }
  selectedNavItem(item: number) {
    console.log('item index changed!', item);
    this.item = item;
  }
  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

@Component({
  selector: 'my-nav',
  template:`
    
item 1 (click me)
  `,
})
export class Navigation {
  constructor(private navService:NavService) {}
  selectedNavItem(item: number) {
    console.log('selected nav item ' + item);
    this.navService.emit(item);
  }
}

如果您尝试使用Plunker此方法,我可能会对此方法不满意:

ObservingComponent需要在销毁时取消订阅

我们必须传递组件,subscribe()以便this在调用回调时设置正确

更新:解决第二个问题的替代方法是让ObservingComponent直接订阅navchangeEventEmitter属性:

constructor(private navService:NavService) {
   this.subscription = this.navService.navchange.subscribe(data =>
     this.selectedNavItem(data));
}

如果我们直接订阅,那么我们就不需要subscribe()NavService上的方法了.

为了使NavService更加封装,您可以添加一个getNavChangeEmitter()方法并使用它:

getNavChangeEmitter() { return this.navchange; }  // in NavService

constructor(private navService:NavService) {  // in ObservingComponent
   this.subscription = this.navService.getNavChangeEmitter().subscribe(data =>
     this.selectedNavItem(data));
}