BehaviorSubject 不工作 Angular 5

Question

我似乎无法弄清楚问题是什么，

我有一个服务有这样的行为主题...

popupSource = new BehaviorSubject<any>('');

popup(component) {
   this.popupSource.next(component);
}

然后在我的 header 组件中

popupClick() {
    this._service.popup('example');    
}

然后在我的 header.html

<button (click)="popupClick()"></button>

然后在我的应用程序组件中

ngOnInit() {
    this._service.popupSource.subscribe((result) => {
       console.log(result);
    })
}

所以发生的事情是点击触发了 this._service.popup('example'); 但它从未达到订阅...

我在每个函数上都设置了断点，它成功到达了 this.popupSource.next(component)，但之后什么都没有？？每次单击按钮时，我都应该获取控制台日志。

我不确定我做错了什么...为了简洁起见，我省略了代码，所以如果您需要更多信息，请告诉我

编辑

我也试过

private popupSource = new BehaviorSubject<any>('');

getPopup = this.popupSource.asObservable();

popup(component) {
   this.popupSource.next(component);
}

我的应用组件中的 getPopup 改为监听

ngOnInit() {
    this._service.getPopup.subscribe((result) => {
       console.log(result);
    })
}

这也不管用，我不知道问题出在哪里...

谢谢

Answer 1

在你的服务中，写一个像这样的新方法：

popupSource = new BehaviorSubject<any>('');

getPopupSource() { 
   return this.popupSource.asObservable();
}

并订阅它，而不是直接订阅主题本身。您可以在订阅它时添加 'asObservable()' 部分，而不是创建一个全新的方法，但我喜欢单独的方法，这样我就可以将主题保密，并且我通常会在不同的地方多次订阅一些东西一个应用程序，所以它减少了重复。

在你的组件中：

this._service.getPopupSource().subscribe( result => { etc...})

编辑：

您场景的演示重现 - https://stackblitz.com/edit/angular-n6esd5

Answer 2

您的问题是您在两个不同的模块中提供服务，最终有两个服务实例。如果您使用 Angular v6，最简单的方法是在您的服务中使用 providedIn 标志：

import { Injectable } from '@angular/core';

@Injectable({providedIn: 'root'})
class myService {}

通过这种方式，您无需在任何模块的 providers 数组中提供您的服务，它会自动在根注入器中提供。

可以在此处找到关于此的文档：Angular providers。

如果您使用的是 Angular v5，您应该只在 AppModule 中提供您的服务。

Answer 3

你可能没有相同的服务实例，我同样的问题是我的服务有@Injectable({ providedIn: 'root'})，而且我把这个服务放在组件提供者[]数组中，只需删除提供者数组, 然后就可以了

BehaviorSubject 不工作 Angular 5

BehaviorSubject not working Angular 5

javascript

angular

typescript

behaviorsubject