web-dev-qa-db-fra.com

Angular 2 Component écouter le changement de service

J'ai une question simple sur la détection des changements.

J'ai un composant et un service (global) avec un booléen à l'intérieur. Comment puis-je faire en sorte que le composant écoute ce booléen et exécute une fonction si ce booléen change?

Merci!

angularangular2-servicesangular2-changedetection
24
Han Che

Selon la façon dont ce booléen change, vous pouvez l'exposer en tant que Observable<boolean> sur votre service, puis abonnez-vous à 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 aurez 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, vous devrez peut-être faire d'autres choses pour que votre composant soit mis à jour, mais c'est l'essentiel d'utiliser un observable. Remarque, vous souhaiterez vous désinscrire du flux myBool $ à un moment donné pour éviter les fuites de mémoire et les effets secondaires inattendus.

Une autre option consiste à utiliser le canal asynchrone dans votre modèle au lieu de vous abonner explicitement au flux dans le constructeur. Cela garantira également la suppression automatique de l'abonnement. Encore une fois, cela dépend de ce que vous devez faire exactement avec les valeurs booléennes.

33
Sam Storie

La réponse de Sam est tout à fait juste. Je voudrais juste ajouter que vous pouvez également utiliser un setter TypeScript pour déclencher automatiquement l'événement 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);
    }
}
13
Thierry Templier