BehaviorSubject 不工作 Angular 5

Question

我似乎無法弄清楚問題是什么，

我有一個服務，它有一個像這樣的行為主題......

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

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

然后在我的標題組件中

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

您的問題是您在兩個不同的模塊中提供服務，最終有兩個服務實例。 如果您使用的是 Angular v6，最簡單的方法是在您的服務中使用providedIn標志：

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

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

通過這種方式，您不需要在任何模塊的 providers 數組中提供您的服務，它將在根注入器中自動提供。

可以在此處找到關於此的文檔： Angular 提供者。

如果您使用的是 Angular v5，您應該只在您的 AppModule 中提供您的服務。

Answer 2

在您的服務中，編寫這樣的新方法：

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

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

並訂閱它而不是直接訂閱主題本身。 您可以在訂閱時添加 'asObservable()' 部分，而不是創建一個全新的方法，但我喜歡單獨的方法，這樣我就可以保持主題私有，而且我通常在整個過程中多次訂閱某些內容一個應用程序，因此它減少了重復。

在您的組件中：

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

編輯 ：

場景的演示重現 - https://stackblitz.com/edit/angular-n6esd5

Answer 3

您可能沒有相同的服務實例，我同樣的問題是我的服務有@Injectable({ providedIn: 'root'}) ，但我將此服務放在組件提供者 [] 數組中，只需刪除提供者數組，然后它工作