typescript - Angular 2 |订阅 Observables

Question

我正在尝试通过中间人(服务)让 2 个组件相互通信。

我有一个类似 Photoshop 的应用程序，我想要一个组件(一个带有按钮的窗口)在我的“imageView”中添加一个图层。

它们都嵌套在其他 View 中，所以我不能使用“@Output”。

按钮触发器:

  addLayer() {
     this._broadcastService.addLayer(0);
  }

接收组件:

  constructor(private _broadcastService:BroadcastService) { }

  ngOnInit() {
      this.subscription = this._broadcastService.layer$.subscribe(
      data => this.test(data))
  }

广播服务:

  private _layerSubject = new BehaviorSubject<number>(0);

  layer$ = this._layerSubject.asObservable();

  addLayer(data: number) {
      this._layerSubject.next(data);
  }

接收组件没有收到任何东西。他不触发，只在启动时触发一次，我想每次按添加层按钮时触发一些东西。

谢谢!

Answer 1

您需要在公共(public)父组件上提供 BroadcastService 一次

   @Component({
     selector: '...',
     provide: [BroadcastService],
   })
   class AppComponent {}

要与整个应用程序共享同一实例，请在根组件处提供它，该组件是 Angular2 应用程序中所有组件和指令的公共(public)父级。 (或者，您可以在 bootstrap(AppComponent, [BroadcastService]) 中提供它)

如果您在其他组件中提供它，则此组件及其子组件将获得不同的服务实例。