在 Angular 8 中单击按钮时多次调用 Subscribe() 方法答案

【问题标题】：Subscribe() method getting called multiple times on click of button in Angular 8在 Angular 8 中单击按钮时多次调用 Subscribe() 方法
【发布时间】：2020-08-17 07:50:30
【问题描述】：

由于问题，我在开发 Angular 8 应用程序时卡住了。 UI上有两个按钮。当我点击一个按钮时，会触发一个事件，它为我提供了它在数组 packageHeaders 中的索引位置。

<p-tabView (onChange)="tabChange($event)">
          <p-tabPanel *ngFor="let tabHeader of packageHeaders" [header]=tabHeader>
                //few html lines
          </p-tabPanel>  
</p-tabView>

基于索引，我在 3-4 个不同的组件中呈现包数据，并根据业务规则/要求执行计算。

为了使所选索引在所有组件中可用，我在服务类中声明了一个 BehaviourSubject 并将索引传递给它。然后，我将其发布为可观察的，以便我的组件可以订阅它。下面是服务类代码sn-p：

public tabIndex = new BehaviorSubject<number>(0);

findTabClicked(changeInTabSelection: number) {
    this.tabIndex.next(changeInTabSelection);
  }

  getSelectedTab(): Observable<number> {
    return this.tabIndex.asObservable();
  }

在我的组件中，我订阅它以获得最新的选定值。例如：

 this.service.getSelectedTab().subscribe((selectedTabIndex) => {
      this.packageTypeInUse(selectedTabIndex);
      this.calculateTotalOnQuantityChange(this.regularIndex[selectedTabIndex]);
    });

我也在 ngOnDestroy() 生命周期钩子中取消订阅它。在模板中，我使用 for 循环来显示行 Items *ngFor="let item of packageLineItems[tabIndex]

因此，基于此索引，我在 UI 上显示了一个订单项列表。我可以修改项目值。我也可以通过点击按钮遍历到其他tabHeader。

有两个问题：

上述订阅方法在所有组件中被调用两次。
在调试代码时，我了解到，在第一次订阅时，我的数组 packageLineItems[tabIndex] 具有修改后的值，但在第二次订阅时它会被初始数组值覆盖。

我已经在 ngOnInit() 上初始化了数组。可以肯定的是，我还验证了在更改选项卡标题时，不会调用 ngOnInit()。不确定，数组如何在第二次不需要的订阅调用时自动重置为初始值。

【问题讨论】：

你能检查一下组件是否在某个地方加载了两次，可能是在 app.module.ts 中吗？这可以解释 subscribe 被调用了两次。
我已经交叉验证。所有组件都声明一次。奇怪的是，当单击发出按钮位置索引的标题按钮触发事件时，在流程之间的某个位置，它会自动采用先前选择的索引。因此，导致了错误的计算。我没有按照我们的要求使用不同的路线。我已将其声明为：const routes: Routes = [ { path: '', component: MainComponent, resolve: { rateCardsResolver: RateCardsResolver, lineItems: ItemCategoriesResolver }, }, ];

标签： angular typescript observable

【解决方案1】：

终于，问题解决了。这是一个愚蠢的错误，但却是一个很好的理解。我分享的 HTML sn-p 有 for-loop。我们没有像下面那样关闭html标签<p-tabPanel>，而是在将子组件声明到循环中之后关闭它。

<p-tabPanel *ngFor="let tabHeader of this.packageHeaders" [header]=tabHeader></p-tabPanel>

这就是组件被多次初始化并且与订阅者相同的原因。

【讨论】：