Angular 2 EventEmitter - 从服务函数广播 next( ... )

Question

据我了解，.toRx().subscribe( ...) 函数用于接收消息，而 .next() 函数用于广播消息

在这个 plnkr ( http://plnkr.co/edit/MT3xOB?p=info ) 中，您从一个似乎最初从模板定义/派生的数据对象调用 .toRx().subscribe( ... ) 函数:

@Component({
  selector : 'child-cmp',
  template : '',
  inputs : ['data']
})
class ChildCmp {
  afterViewInit() {
    this.data.toRx().subscribe((data) => {
      console.log('New data has arrived!', data);
    });
  }
}

在此 plnkr ( http://plnkr.co/edit/rNdInA?p=preview ) 中，您从 evt 对象及其发射器函数(源自注入(inject)组件构造函数的服务)调用 .toRx().subscribe( ... ) 函数

@Component({
  selector : 'parent-cmp',
  template : ''
})
class ParentCmp {
  constructor(evt: EventService) {
    evt.emitter.subscribe((data) => 
      console.log("I'm the parent cmp and I got this data", data));
  }
}

BROADCAST 是否有可能发生在服务本身的函数中，同时，组件是否有可能在不依赖返回的服务对象或模板数据对象链接其 . toRX().subscribe( ... ) 函数调用？

import {Injectable, EventEmitter} from 'angular2/angular2';
@Injectable()
export class DataService {
    items:Array<any>;
    dispatcher: EventEmitter = new EventEmitter();
    constructor() {
        this.items = [
            { name: 'AAAA' },
            { name: 'BBBB' },
            { name: 'CCCC' }
        ];
    }
    getItems() {
        return this.items;
    }
    sendItems() {
        this.dispatcher.next( this.items );
    } 
}
export var DATA_BINDINGS: Array<any> = [
    DataService
];


@Component({
    selector: 'rabble'
})
@View({
    ...
})
export class Rabble {

    items       : Array<any>;

    constructor( public dataService  : DataService) { 

        console.log('this.routeParam', this.dataService.getItems());
    }

    afterViewInit() {
        this.???.toRx().subscribe((data) => {
            console.log('New item data has arrived!', data);
        });
    }

    handleClick() {
        this.dataService.sendItems();
    }
}

Answer 1

已更新至 2.0 稳定版:EventEmitter 现在仅用于组件通信。这是 Subjects 和 ReplaySubjects 的更好用途。我已将示例更新为 2.0 代码。

已更新至 BETA 1:您不再需要在发射器上调用 .toRx()，因此我更新了代码以匹配并添加了一个示例以取消订阅。

所以现在 (Alpha 45) eventEmitter 有 toRx() 方法返回一个 RxJS SUBJECT

您可以在谷歌上搜索一下那是什么以及您可以用它做什么，但这才是您实际遇到的问题。当您调用 toRx() 时，它只会从 eventEmitter 返回内部主题，因此您可以在服务构造函数中执行此操作。

然后我在事件服务中添加了你想要广播的功能

class EventService {
  //could be regular Subject but I like how ReplaySubject will send the last item when a new subscriber joins
  emitter: ReplaySubject<any> = new ReplaySubject(1);
  constructor() {

  }
  doSomething(data){
    this.emitter.next(data);
  }
}

然后在您的组件中订阅发射器

class ParentCmp {
  myData: any;
  constructor(private evt: EventService) {
    //rx emitter
    this.evt.emitter.subscribe((data) => {
      this.myData = data;
      console.log("I'm the parent cmp and I got this data", data));
    }
  }
}

这是一个带有内置取消订阅(处理)的扩展类

export class ParentCmp implements OnDestroy {
  myData: any;
  subscription: any;
  constructor(evt: EventService) {
    //rx emitter
    this.subscription = evt.emitter.subscribe((data) => {
      this.myData = data;
      console.log("I'm the parent cmp and I got this data", data));
    }
  }
  ngOnDestroy() {
    this.subscription.dispose();
  }
}

我对你的最后一个问题有点困惑，但想想“接收消息”这个词。您必须收听 某些内容，这就是订阅方法的作用，也是必需的。

很酷的是，现在您可以在任何地方(甚至在其他服务中)调用该 observable，而 IMO 是组件之间通信的最佳方式。他们不需要知道自己在树中的位置，也不需要关心其他组件是否存在或正在监听。

我用我的工作方式 fork 了你的 Plunker HERE(仍在 Alpha45 上)

RxJs source and info on subject

Angular2 source and info on the subject inside the eventEmitter