Angular - Singleton Service Изменяет только доступ к одному компоненту

Question

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

Вот структура компонента. Им всем нужен доступ к данным

Главный стенд | --- размеры --- заголовки --- lo go

основной компонент - аналогичная технология, используемая во всех компонентах.

import { Component, OnInit } from '@angular/core';

import { DesignStudioService } from 'app/main/design-studio/design-studio.service';


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

    showDimensions : boolean;
    designType : string = 'bench';

    constructor(private _studio: DesignStudioService) { }


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

    menuClick(param): void {
        this._studio.onMenuClick(param);
    }

    menuLeave(): void {
        this._studio.onMenuLeave();
    }

    menuEnter(param): void {
        this._studio.onMenuEnter(param);
    }

}

html для "основного" компонента. Необходимо нажать на шестиугольник, и эта функция menuClick в компоненте затем изменяет сервис, который изменяет внешний вид других компонентов. Это работает в этом компоненте, но не в других.

<div class="hexagon" 
     style="position:absolute; left:60px; top:8px;" 
     (click)="menuClick('Dimensions')" 
     (mouseleave)="menuLeave()"
     (mouseenter)="menuEnter('Dimensions')">

    <span>  
        <mat-icon style="position:relative; left:15px; top:-5px" 
                  class="w-30 text-center mat-display-1">build
        </mat-icon>
    </span>

</div>

компонент измерения - не отвечает на изменения

import { Component, OnInit } from '@angular/core';

import { DesignStudioService } from 'app/main/design-studio/design-studio.service';


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


    showDimensions : boolean;
    designType : string = 'bench';


    constructor(private _studio: DesignStudioService) { }


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

}

Размеры html (не работает)

<div>The showDimensions in dimensions is {{showDimensions}}</div>

Служба

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
import { BehaviorSubject, Subject, Observable } from 'rxjs';

@Injectable({providedIn: 'root'})
export class DesignStudioService implements Resolve<any>
{

    private dimSource = new BehaviorSubject(true);
    currentDim = this.dimSource.asObservable();

    private wallLength = new BehaviorSubject(50);
    sharedWallLength = this.wallLength.asObservable();

    private wallHeight = new BehaviorSubject(50);
    sharedWallHeight = this.wallHeight.asObservable();

    private designType = new BehaviorSubject('bench');
    sharedDesignType = this.designType.asObservable();


    design: any;
    onDesignChanged: BehaviorSubject<any>;



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