Angular 9 - изменение данных в общей службе не работает с логическими данными

Question

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

Два компонента выглядят так:

@Component({
  selector: 'design-sidebar-bench',
  templateUrl: './bench.component.html',
  styleUrls: ['./bench.component.scss'],
  providers: [DesignStudioService]
})
export class BenchComponent implements OnInit {

  showDimensions: boolean;

  constructor(private _studio: DesignStudioService) { }

  ngOnInit() {
    this._studio.sharedShowDimensions.subscribe(showDimensions => this.showDimensions = showDimensions)
  }
}

Соответствующая часть службы показана ниже.

export class DesignStudioService implements Resolve<any>
{

  private showDimensions = new BehaviorSubject(true);
  sharedShowDimensions = this.showDimensions.asObservable();


  /**
   * Constructor
   *
   * @param {HttpClient} _httpClient
   */
  constructor(
    private _httpClient: HttpClient
  ) {
    // Set the defaults
    this.onDesignChanged = new BehaviorSubject({});

  }



  // When a menu icon is clicked
  onMenuClick(hoverName: any) {
    console.log("Menu click detected");
    console.log(hoverName);
    this.showDimensions : boolean = false;
    if (hoverName == "Dimensions") { this.clickDimensions = true; }
  }

Это компонентное представление, при котором пользователь нажимает, чтобы включить элемент.

<div
  class="hexagon"
  style="position:absolute; left:60px; top:8px;"
  (click)="_studio.onMenuClick('Dimensions')"
  (mouseleave)="_studio.onMenuLeave()"
  (mouseenter)="_studio.onMenuEnter('Dimensions')"
>
  <span>
    <mat-icon
      style="position:relative; left:15px; top:-5px"
      class="w-30 text-center mat-display-1"
      >build
    </mat-icon>
  </span>
</div>

Когда код скомпилированный с помощью ng-serve, везде, где this.showDimensions назначается в сервисе, возникает следующая ошибка.

error TS2322: Type 'false' is not assignable to type 'BehaviorSubject<boolean>'

Не уверен, как это должно работать. Я внимательно следил за всеми примерами. Все помогает. Заранее спасибо.

Answer 1

Это связано с тем, что в вашей службе вы присвоили логическую переменную для типа BehaviorSubject вашего showDimensions.

С этим, чтобы присвоить значение вашей переменной BehaviorSubject , Вы должны использовать функцию next() для передачи ваших данных.

Пример:

onMenuClick(hoverName: any) {
    ...
    // You must avoid assigning it like this: 
    // "this.showDimensions: boolean = false;" 
    // as this isn't a simple boolean type but a BehaviorSubject type
    this.showDimensions.next(false);   
}

Предоставили Stackblitz Demo для справки