angular - 执行服务中的方法时如何触发组件中的方法？

Question

我有一个图表配置（使用 amCharts），其中为项目符号注册了一个 eventListener。此事件侦听器触发我的图表服务中的另一个函数。

我想在图表服务中的 eventListener 被触发后立即在我的组件中触发一个方法。我怎样才能最好地用 Angular 解决这个问题？

我的服务（chart.service.ts）如下所示：

getSingleChart(chart, amChart) {
  // some configs
  // ...

  this.chart.updateChart(amChart, () => {
    // some configs
    // ...
    amChart.addListener('clickGraphItem', this.bulletClicked);
  });

  // I don't know if this method is needed?
  // The idea here was to execute the method in the component, if the bulletClicked pro is true
  chartBulletClicked() {
    return this.bulletClicked = true;
  }
}

我的组件中应该触发的方法（chart.component.ts）：

onBulletClicked() {
    // ...
}

标签： angulartypescriptrxjsangular-servicesangular-dependency-injection

Answer 1

您可以在服务中定义一个主题，该主题将在每次触发 eventListener 时发出，并在您的组件中订阅此主题，并在每次新发射时调用您的方法：

您的服务：

private _chartEventTriggered$: Subject<void> = new Subject();

get chartEventTriggered$(): Observable<void> {
    return this._chartEventTriggered$.asObservable();
}

getSingleChart(chart, amChart) {
  // some configs
  // ...

  this.chart.updateChart(amChart, () => {
    // some configs
    // ...
    amChart.addListener('clickGraphItem', () => this._chartEventTriggered$.next());
  });

}

在您的组件中：

...
ngOnInit() {
    this.service.chartEventTriggered$.subscribe(() => this.onBulletClicked());
}

onBulletClicked() {
    // do stuff
}
...