Булева наблюдаемая не передаваемая между компонентами

Question

Я использую angular4 для панели инструментов и пытаюсь скрыть один div, когда пользователь нажимает на div в отдельном компоненте. Я создал сервис с булевой наблюдаемой, но когда я нажимаю на кнопку, чтобы скрыть div, сервис обновляется с новым значением, но другой div не обнаруживает изменения

Услуги

import { Injectable } from '@angular/core';
import { BehaviorSubject } from "rxjs/BehaviorSubject";


@Injectable()
export class ToggleParamsService {


  toggleReportAgeSentiment: BehaviorSubject<boolean>;


  constructor() {

    this.toggleReportAgeSentiment = new BehaviorSubject<boolean>(true);

    this.toggleReportAgeSentiment.asObservable();


  }

  toggleReportAgeSentiment(showHide: boolean)
  {
    this.toggleReportAgeSentiment.next(showHide) ;
  }



}

Это компонент, который я собираюсь скрыть при обновлении параметра. Я могу видеть, как выполняются обновления, если я захожу на консоль в сервисе, но это не делает в этом компоненте

Компонент

import {Component, Input, OnInit} from '@angular/core';
import {ToggleParamsService} from '../../../../shared/services/toggle-params-service/toggle-params.service';

@Component({
  selector: 'app-report-age-by-sentiment',
  providers: [ToggleParamsService],
  templateUrl: './report-age-by-sentiment.component.html',
  styleUrls: ['./report-age-by-sentiment.component.less']
})
export class ReportAgeBySentimentComponent implements OnInit {

  @Input() episodeReport: any;
  showHide;

  constructor(private toggle: ToggleParamsService) { }   //

  ngOnInit() {
    this.toggle.toggleReportAgeSentiment.subscribe(showHide => this.showHide = showHide);


  }



  changeShowAgeSentiment(){
    this.toggle.toggleReportAgeSentiment(!this.showHide);
  }

}

Template

<div *ngIf="showHide == true">
    <div class = "col-xs-4 col-xs-offset-8 col-sm-4 col-sm-offset-8 col-md-4 col-md-offset-8 col-lg-4 col-lg-offset-8 arrow-down" >

      <!--<svg height="30" width="60" class="arrow-down-open">-->
      <!--<polygon points="0,0 30,30 0,60" style="fill:#38405e;"></polygon>-->
      <!--</svg>-->

      <img src = "assets/img/arrow-down.png" class = "arrow-down-open" alt = "arrow-down" width = "60px"
           height = "30px" />
    </div>
  <div class = "row">
    <div class = "col-xs-12 col-sm-12 col-md-12 col-lg-12" (click) = "changeShowAgeSentiment()">
      <div class = "widget clearfix" >
        <div class = "widget-header">Sentiment By Age Range</div>
        <div class = "widget-body-no-top-padding">
          <div style = "min-height: 278px; width: 100%;">
            <app-report-age-by-sentiment-chart-display
              [episodeReport]="episodeReport"></app-report-age-by-sentiment-chart-display>
          </div>
        </div>
        <div class = "widget-base"></div>
      </div>
    </div>
  </div>

</div>

Есть ли здесь что-то фундаментальное, чего мне не хватает или как заставить компонент обнаруживать изменения?

Answer 1

Хорошо, так что я оставил это на некоторое время, но сейчас вернусь к этому и выяснил, что именно пошло не так.

Проблема заключалась в том, что каждый из моих компонентов создавал отдельный экземпляр службы, на которую они подписаны. Когда один обновлялся, другой не видел обновлений, потому что он не был подписан на тот же экземпляр.

Чтобы решить эту проблему, я переместил провайдеров из каждой услуги в корневой компонент, а затем разделил сумму услуги в каждом из филиалов

Answer 2

Я предполагаю, что вы на самом деле не ждете, пока отклик не сработает и не вернет значение. Вы просто вызываете ответ. Попробуйте добавить .subscribe() к вашему сервисному вызову.

changeShowAgeSentiment(){
    this.toggle.toggleReportAgeSentiment(!this.showHide).subscribe(res => this.showHide = res;
  }