web-dev-qa-db-fra.com

Comment détecter un changement de variable de service lors de la mise à jour à partir d'un autre composant?

J'essaie d'obtenir la valeur mise à jour d'une variable de service (isSidebarVisible) qui est maintenue à jour par un autre composant (header) avec un événement 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 (où la variable de service est mise à jour)

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() {

    }
}

Je peux voir la valeur de la variable de service changer dans header.component.html quand {{ isSidebarVisible }} mais en sidebar.component.html _ il affiche toujours la valeur par défaut et n’écoute jamais les modifications.

S'il vous plaît aidez-moi à résoudre ce problème.

angularangular2-services
33
Body

Déplacez l'abonnement vers le service et les deux composants peuvent accéder à cette valeur. Si vous n’avez besoin que d’une seule valeur, vous pouvez l’utiliser directement (comme je l’ai fait dans sidebar.component ); Si vous avez besoin de mettre à jour quelque chose avec cette valeur, vous pouvez utiliser getter (exemple dans 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()
    }
}

Vous pouvez également vous inscrire au sujet dans l’un ou les deux composants et obtenir la valeur à cet endroit:

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

Si vous voulez en savoir plus sur les sujets, jetez un œil à ici .

50
Sasxa