在这个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对象及其发射器函数(源自注入组件构造函数的Service)调用.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();
}
}
解决方法
更新到BETA 1：您不再需要在发射器上调用.toRx(),因此我正在更新代码以匹配并向unSubscribe添加示例.
所以现在(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是组件之间通信的最佳方式.他们不需要知道他们在树中的位置,也不需要关心其他组件是否存在或正在倾听.
我用我的方式工作HERE分叉你的Plunker
(仍在Alpha45上)
RxJs source and info on subject
Angular2 source and info on the subject inside the eventEmitter
