在 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>

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

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

返回导航栏，分析器的 link 还应显示已选择的系列数的计数器：

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

这是我的问题：我无法更改计数器。在初始加载时，link 应显示为 Analyzer (0)，但每当我单击要添加的系列之一时，计数器仍为 0。如果我导航到分析器视图，显示在图表中正确显示了正确的系列，但导航栏仍然在计数器中显示 (0)。与分析器视图和服务相关的所有其他行为似乎工作正常。

这是我目前尝试过的方法：

方法一

analyzer.service.ts:

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

primeng-菜单-nav.component.ts

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

primeng-菜单-nav.component.html

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

方法二

analyzer.service.ts

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

primeng-菜单-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'
})

提供单例服务以在整个应用程序中可用。我的任何模块中都没有将服务列为提供者。

Answer 1

终于弄明白了，所以我想我会 post 一个答案以防万一。我在 tools 库中有一个额外的 'ShareModule'，我正在导入到 data-portal app.module.ts 以导入组件。刚刚意识到这是不必要的，因为我可以只导入 tools.module.ts，并且从导入中删除 ShareModule 解决了我的计数器问题。猜测是因为提供 Analyzer 服务出现问题。

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

Sharing data between components in Angular 9

javascript

angular

angular9