Angular 2试图找到像Angular 1.x这样的$广播

时间:2017-06-18 06:33:46

标签: angular

我正在关注https://blog.lacolaco.net/post/event-broadcasting-in-angular-2/

中的文章

问题是:它有效,但只有在发送"(emitStringBroadcast)& "接收" (registerStringBroadcast) - 属于同一个组件。

我在两个不同的组件中需要它们(基本上 - 我需要听取sending_child.ts发出的事件 - 我应用程序中的任何地方)

receiving_child.ts如何收到消息的任何想法?

broadcaster.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

// app.ts (application root component)
@Component({
    selector: 'app',
    ...
    providers: [
        // application-shared broadcaster (similar to $rootScope)
        Broadcaster
    ]
})
class App {}

sending_child.ts

@Component({
    selector: 'send-child'
})
export class SendComponent {
  constructor(private broadcaster: Broadcaster) {
  }

  emitStringBroadcast() {
    this.broadcaster.broadcast('MyEvent', 'some message');
  }
}

receiving_child.ts

// child.ts
@Component({
    selector: 'receive-child'
})
export class ReceiveComponent {
  constructor(private broadcaster: Broadcaster) {
  }

  registerStringBroadcast() {
    this.broadcaster.on<string>('MyEvent')
      .subscribe(message => {
        ...
      });
  } 

}

0 个答案:

没有答案