为什么我的主题可观察订户以角度呼叫多次?

时间:2020-04-16 17:49:02

标签: angular typescript rxjs

在角度上,我有这样的服务

  private subject = new Subject<any>();
  private  vehicleSubject = new Subject<any>();

  sendData = (data: any) => this.subject.next({ data });

  sendVehicleData = (data: any) => this.vehicleSubject.next({ data });

  getData = (): Observable<any> => this.subject.asObservable();

  getVehicleData = (): Observable<any> => this.vehicleSubject.asObservable();

现在我在sidebar(parent)中拥有tab view的{​​{1}}组件,primeng

{{user?.fullName}}

服务与检查-> 检查工作->

在打开sidebar.component.html并在sidebar.component.ts之外单击用户的sidebar中,这样我会将数据像这样粘贴到我的子组件中

sidebar

在我的 onSidebarOutside(e) { if (this.index === 0 && this.sideBarVisible && !this.isCustomerCancelBtnClicked) { e.target.value = true; this.verifyCustomer = e; } else if(this.index === 1){ console.log('in index 1'); this.dataService.sendVehicleData(true); } if (this.isCustomerCancelBtnClicked) { this.isCustomerCancelBtnClicked = false; } } 内,我有一个vehicle-side-list.component的订户来获取这样的数据

ngOnInit

但是问题是我的ngOnInit() { this.dataService.getVehicleData().subscribe(obj => { console.log('in vehicle item subscruber', obj); }); } 中的订户多次调用,而我多次获得了此日志vehicle-side-list.component。我不明白为什么要多次打电话。我只发送一次值,并且通过console.log('in vehicle item subscruber', obj);组件发送值,它多次调用。

我的组件调用结构是这样的

sidebar

我想将数据从sidebar -customer-component -appointment-component -vehicle-component -appointment-component -inspection-component -appointment-component 传递到sidebar

我在这里做错什么了?

1 个答案:

答案 0 :(得分:3)

似乎您尚未取消订阅ngDestroy内部的Observable方法。

无论何时单击,都将添加新组件,这将为该可观察对象添加更多侦听器。只需取消订阅子组件ngDestroy中的可观察对象,它就可以正常工作。

您需要在子组件中进行以下更改。创建一个私有财产,并使用它取消订阅。

private destroy:Subject = new Subject();

ngOnInit() {
   this.dataService.getVehicleData().pipe(
     takeUntil(this.destroy)     // import takeUntil from rxjs/operators.
      ).subscribe(obj => {
     console.log('in vehicle item subscruber', obj);
    });
}

ngDestroy() {
  this.destroy.next();
}