Angular 9 中的組件之間共享數據

Question

我有一個帶有自定義庫（ tools ）的應用程序，其中包含許多要與應用程序中的其他項目共享的組件（我們稱其中一個為data-portal ）。

在某些情況下，在data-portal app.component.html我有：

<div>
  ...
  <lib-primeng-menu-nav></lib-primeng-menu-nav>
  <router-outlet></router-outlet>
  ...
</div>

其中lib-primeng-menu-nav ，來自tools庫，包含項目的導航， router-outlet可以顯示幾個不同的視圖，其中一個顯示許多帶有時間序列數據的圖表（也來自tools庫):

當用戶單擊圖表左下角的星形圖標時，它應該將該系列從包含在“分析器”視圖中切換，其中可以在單個圖表上繪制多個系列以進行比較。 我在tools中有一個分析器服務，用於跟蹤應在分析器中顯示哪些系列。

返回導航欄，Analyzer 的鏈接還應顯示已選擇的系列數量的計數器：

<nav id="sidebar-nav" class="navbar navbar-fixed-top navbar-light">
  ...
  <a routerLink="/analyzer">&nbsp; Analyzer ({{analyzerSeries}})</a>
  ...
</nav>

這是我的問題：我無法讓櫃台改變。 在初始加載時，鏈接應顯示為Analyzer (0) ，但每當我單擊要添加的系列之一時，計數器保持為 0。如果我導航到 Analyzer 視圖，則顯示正確顯示正確的系列在圖表中，但導航欄仍然在計數器中顯示(0) 。 與分析器視圖和服務相關的所有其他行為似乎都可以正常工作。

這是我到目前為止所嘗試的：

方法一

分析器.service.ts ：

@Injectable({
  providedIn: 'root'
})
export class AnalyzerService {
  // Keep track of series in the analyzer
  public analyzerSeries = [];
  public analyzerData = {
    analyzerTableDates: [],
    analyzerSeries: [],
  };

primeng-menu-nav.component.ts

  constructor(
    private _analyzerService: AnalyzerService,
    private route: ActivatedRoute,
    private _router: Router
  ) { }
ngOnInit() {
    ...
    this.analyzerSeries = this._analyzerService.analyzerSeries.length;
    ...
  }

primeng-menu-nav.component.html

<nav id="sidebar-nav" class="navbar navbar-fixed-top navbar-light">
  ...
  <a routerLink="/analyzer">&nbsp; Analyzer ({{analyzerSeries}})</a>
  ...
</nav>

方法二

分析器.service.ts

  public analyzerSeries = [];
  private analyzerSeriesTest = new BehaviorSubject(null);
  analyzerSeries$ = this.analyzerSeriesTest.asObservable();
  ...
  updateAnalyzer(seriesId) {
    ...
    this.analyzerSeriesTest.next(this.analyzerSeries.length);
    ...
  }

primeng-menu-nav.component.ts

constructor(
    public _analyzerService: AnalyzerService,
    private route: ActivatedRoute,
    private _router: Router
  ) {
    this.analyzerSeriesCount = this._analyzerService.analyzerSeries$.subscribe((data: any) => {
      this.analyzerSeries = data;
    });
  }

這些都沒有奏效。 我還嘗試在服務中使用 EventEmitter 而不是 Behavior Subject 來讓組件訂閱，但我碰壁了。 我的預感是服務沒有正確提供，但我不完全確定。 我認為，

@Injectable({
  providedIn: 'root'
})

提供 singleton 服務，可在整個應用程序中使用。 我的任何模塊中都沒有將服務列為提供者。

Answer 1

終於想通了，所以想我會發布一個答案以防萬一。 我在導入data-portal app.module.ts 的tools庫中有一個額外的“ShareModule”以導入組件。 剛剛意識到這是不必要的，因為我可以只導入tools.module.ts ，並從導入中刪除 ShareModule 解決了我的計數器問題。 猜猜這是導致提供分析器服務出現問題的原因。