services - create service angular cli

¿Cómo puedo detectar el cambio de la variable de servicio cuando se actualiza desde otro componente?

Question

Estoy tratando de obtener el valor actualizado de una variable de servicio ( isSidebarVisible ) que se mantiene actualizada por otro componente ( header ) con un evento de clic ( toggleSidebar ).

sidebar.service.ts

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

@Injectable() 
export class SidebarService {
    isSidebarVisible: boolean;

    sidebarVisibilityChange: Subject<boolean> = new Subject<boolean>();

    constructor()  {
        this.isSidebarVisible = false;
    }

    toggleSidebarVisibilty() {
        this.isSidebarVisible = !this.isSidebarVisible
        this.sidebarVisibilityChange.next(this.isSidebarVisible);
    }
}

sidebar.component.ts

export class SidebarComponent implements OnInit {
    asideVisible: boolean;
    _asideSubscription: any;

    constructor(private sidebarService: SidebarService) {
        this.asideVisible = sidebarService.isSidebarVisible
        this._asideSubscription = sidebarService.sidebarVisibilityChange.subscribe((value) => {
            this.asideVisible = value
        })
    }

    ngOnInit() {
    }
}

header.component.ts (donde se actualiza la variable de servicio)

export class HeaderComponent implements OnInit {
    isSidebarVisible: boolean;
    _subscription: any;

    constructor(private sidebarService: SidebarService) {
        this._subscription = sidebarService.sidebarVisibilityChange.subscribe((value) => {
            this.isSidebarVisible = value
        })
    }

    toggleSidebar() {
        this.sidebarService.toggleSidebarVisibilty()
    }

    ngOnInit() {

    }
}

Puedo ver el cambio del valor de la variable de servicio en header.component.html cuando {{ isSidebarVisible }} pero en sidebar.component.html siempre imprime el valor predeterminado y nunca escuchó los cambios.

Por favor ayúdame a arreglar esto.

Answer 1

Mueva la suscripción al servicio y ambos componentes pueden acceder a este valor. Si necesita valor solo una vez, puede usarlo directamente (como lo hice en sidebar.component ); Si necesita actualizar algo con este valor, puede usar getter (ejemplo en header.component ).

sidebar.service.ts:

@Injectable() 
export class SidebarService {
    isSidebarVisible: boolean;

    sidebarVisibilityChange: Subject<boolean> = new Subject<boolean>();

    constructor()  {
        this.sidebarVisibilityChange.subscribe((value) => {
            this.isSidebarVisible = value
        });
    }

    toggleSidebarVisibility() {
        this.sidebarVisibilityChange.next(!this.isSidebarVisible);
    }
}

sidebar.component.ts

export class SidebarComponent {
    asideVisible: boolean;

    constructor(private sidebarService: SidebarService) {
        this.asideVisible = sidebarService.isSidebarVisible;
    }
}

header.component.ts

export class HeaderComponent {
    constructor(private sidebarService: SidebarService) { }

    get isSidebarVisible(): boolean {
        return this.sidebarService.isSidebarVisible;
    }

    toggleSidebar() {
        this.sidebarService.toggleSidebarVisibility()
    }
}

También puede suscribirse al tema en cualquiera de los dos componentes y obtener el valor allí:

this.sidebarService.sidebarVisibilityChange.subscribe(value => {...});

Si quieres saber más sobre temas, echa un vistazo here .