角 2 |订阅 Observables

Posted 2023-02-23

【中文标题】角 2 |订阅 Observables

【英文标题】：Angular 2 | Subscriping to Observables

【发布时间】：2016-10-09 19:00:31

【问题描述】：

我正在尝试使用 middelman（服务）让 2 个组件相互通信。

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

它们都嵌套在其他视图中，所以我不能使用“@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);
  

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

谢谢！

【问题讨论】：

有什么问题？

什么不起作用？

订阅的组件没有更新

【参考方案1】：

您需要在一个公共父组件上提供BroadcastService一次，例如

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

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

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

【讨论】：

这行得通！太棒了，我不知道您的供应商在“组件漏洞”时遇到了问题，非常感谢！

Angular 创建了一个类似于组件结构的注入器层次结构。当它需要一个依赖时，它开始查看提供者的当前组件/指令，如果它没有找到它，它会继续在父注入器上找到一个。

每次我启动应用程序时，都会触发订阅，这是为什么呢？以及如何防止它发生？

我猜这是BehaviorSubject 的预期行为。它立即向新订阅者发送一个值。如果还没有next() 调用，它会将您传递的0 发送给new BehaviorSubject(0)