我正在关注https://blog.lacolaco.net/post/event-broadcasting-in-angular-2/
中的文章问题是:它有效,但只有在发送"(emitStringBroadcast
)& "接收" (registerStringBroadcast
) - 属于同一个组件。
我在两个不同的组件中需要它们(基本上 - 我需要听取sending_child.ts
发出的事件 - 我应用程序中的任何地方)
receiving_child.ts
如何收到消息的任何想法?
import {Subject} from 'rxjs/Subject';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/map';
interface BroadcastEvent {
key: any;
data?: any;
}
export class Broadcaster {
private _eventBus: Subject<BroadcastEvent>;
constructor() {
this._eventBus = new Subject<BroadcastEvent>();
}
broadcast(key: any, data?: any) {
this._eventBus.next({key, data});
}
on<T>(key: any): Observable<T> {
return this._eventBus.asObservable()
.filter(event => event.key === key)
.map(event => <T>event.data);
}
}
// app.ts (application root component)
@Component({
selector: 'app',
...
providers: [
// application-shared broadcaster (similar to $rootScope)
Broadcaster
]
})
class App {}
@Component({
selector: 'send-child'
})
export class SendComponent {
constructor(private broadcaster: Broadcaster) {
}
emitStringBroadcast() {
this.broadcaster.broadcast('MyEvent', 'some message');
}
}
// child.ts
@Component({
selector: 'receive-child'
})
export class ReceiveComponent {
constructor(private broadcaster: Broadcaster) {
}
registerStringBroadcast() {
this.broadcaster.on<string>('MyEvent')
.subscribe(message => {
...
});
}
}