Angular 2 Component écouter pour changer de service

J'ai une question simple à propos de la détection de changement.

J'ai un composant et un (global) de service avec un booléen à l'intérieur.
Comment puis-je rendre le composant écouter boolean et exécuter une fonction si ce booléen changements?

Merci!

source d'informationauteur Han Che

  1. 26

    En fonction de la façon que booléenne modifications que vous pourriez exposer comme un Observable<boolean> sur votre service, et ensuite vous abonner à ce flux dans votre composant. Votre service ressemblerait à quelque chose comme:

    @Injectable()
export class MyBooleanService {
    myBool$: Observable<boolean>;

    private boolSubject: Subject<boolean>;

    constructor() {
        this.boolSubject = new Subject<boolean>();
        this.myBool$ = this.boolSubject.asObservable();
    }

    ...some code that emits new values using this.boolSubject...
}

    Ensuite dans votre composant, vous auriez quelque chose comme ceci:

    @Component({...})
export class MyComponent {
    currentBool: boolean;

    constructor(service: MyBooleanService) {
        service.myBool$.subscribe((newBool: boolean) => { this.currentBool = newBool; });
    }
}

    Maintenant en fonction de ce que vous devez faire avec cette valeur booléenne que vous pouvez avoir besoin pour faire d'autres choses pour obtenir votre composant de mise à jour, mais c'est l'essentiel de l'aide d'un observable.

    Une autre option est que vous utilisez la async tuyau à l'intérieur de votre modèle au lieu de vous inscrivant explicitement dans le flux dans le constructeur. Encore une fois cependant, cela dépend de ce que exactement ce que vous devez faire avec les valeurs bool.

  2. 10

    Le Sam réponse est complètement à droite. Je tiens juste à ajouter que vous pourrait également tirer profit d'un Tapuscrit de poseur de déclencher automatiquement le cas pour les changements:

    @Injectable()
export class MyBooleanService {
    myBool$: Observable<boolean>;

    private boolSubject: Subject<boolean>;

    constructor() {
        this.boolSubject = new Subject<boolean>();
        this.myBool$ = this.boolSubject.asObservable();
    }

    set myBool(newValue) {
      this._myBool = newValue;
      this.boolSubject.next(newValue);
    }
}