Question

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

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

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

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

然后在我的标题组件

中

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

然后在我的header.html中

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

然后在我的app组件中

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);
}

并在我的app组件中侦听getPopup

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

这也不起作用，我无法弄清楚问题是什么......

由于

Answer 1

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

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

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

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

有关此内容的文档可在此处找到：Angular providers。

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

Answer 2

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

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

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

订阅，而不是直接订阅主题本身。您可以在订阅它时添加'asObservable（）'部分，而不是创建一个全新的方法，但我喜欢单独的方法，所以我可以保持Subject私有，我通常在不同的地方多次订阅一些东西一个应用程序，所以它减少了重复。

在您的组件中：

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

编辑：

演示场景的重新制作 - https://stackblitz.com/edit/angular-n6esd5

Answer 3

您可能没有相同的服务实例，同样的问题是我的服务有@Injectable({ providedIn: 'root'})，但是我将此服务放在了组件provider []数组中，只是删除了providers数组，然后它有效

BehaviorSubject不工作Angular 5

3 个答案: