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 解决了我的计数器问题。 猜猜这是导致提供分析器服务出现问题的原因。