Почему мой субъектный наблюдаемый абонент звонит несколько раз в angular? - PullRequest
Новая
       5

Почему мой субъектный наблюдаемый абонент звонит несколько раз в angular?

1 голос
/ 16 апреля 2020

В angular у меня есть такой сервис 

  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 обоими primeng в моем sidebar.component.html

{{user? .FullName}}

Услуги и инспекции -> Инспекционные работы ->

в моем 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 до appointment-component

Что я здесь не так делаю?

1 Ответ

3 голосов
/ 16 апреля 2020

Похоже, вы не отписались от наблюдаемого внутри метода ngDestroy.

Всякий раз, когда вы нажимаете, вы добавляете новый компонент, который добавляет больше слушателей к этой наблюдаемой. Просто отмените подписку на наблюдаемое в 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();
}
...