在 Angular 9 中的组件之间共享数据

Question

我有一个带有自定义库（）的应用程序，其中包含许多要与应用程序中的其他项目共享的组件（让我们调用其中一个）。toolsdata-portal

对于某些上下文，在app.component中.html我有：data-portal

<div>

  ...

  <lib-primeng-menu-nav></lib-primeng-menu-nav>

  <router-outlet></router-outlet>

  ...

</div>

其中，库中的 包含项目的导航，并且可以显示几个不同的视图，其中一个视图显示许多带有时间序列数据的图表（也来自库）：lib-primeng-menu-navtoolsrouter-outlettools

当用户单击图表左下角的星形图标时，它应该将该序列从包含在“分析器”视图中切换，在该视图中，可以在单个图表上绘制多个序列以进行比较。我有一个分析器服务，用于跟踪应在分析器中显示的系列。tools

返回到导航栏，指向分析器的链接还应显示已选择多少个系列的计数器：

<nav id="sidebar-nav" class="navbar navbar-fixed-top navbar-light">

  ...

  <a routerLink="/analyzer">&nbsp; Analyzer ({{analyzerSeries}})</a>

  ...

</nav>

这是我的问题：我无法让计数器进行更改。在初始加载时，链接按预期方式显示，但每当我单击要添加的系列之一时，计数器仍保持在 0。如果我导航到“分析器”视图，则显示正确显示图表中的正确序列，但导航栏仍显示在计数器中。与分析器视图和服务相关的所有其他行为似乎工作正常。Analyzer (0)(0)

以下是我到目前为止尝试过的方法：

方法 1

analyzer.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>

方法 2

analyzer.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;

    });

Answer 1

终于想通了，所以我想我会发布一个答案以防万一。我在导入到app.module.ts的库中有一个额外的“ShareModule”来导入组件。只是意识到这是不必要的，因为我可以只导入tools.module.ts，并且从导入中删除ShareModule解决了我的计数器问题。猜测导致提供分析器服务的问题。toolsdata-portal