Tengo una pregunta simple sobre la detección de cambios.
Tengo un componente y un servicio (global) con un booleano dentro. ¿Cómo puedo hacer que el componente escuche ese booleano y ejecute una función si ese booleano cambia?
¡Gracias!
Dependiendo de cómo cambie ese booleano, podría exponerlo como un Observable<boolean> en su servicio y luego suscribirse a esa transmisión en su componente. Su servicio sería algo como:
@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... }Entonces en tu componente tendrías algo como esto:
@Component({...}) export class MyComponent { currentBool: boolean; constructor(service: MyBooleanService) { service.myBool$.subscribe((newBool: boolean) => { this.currentBool = newBool; }); } }Ahora, dependiendo de lo que necesite hacer con ese valor bool, es posible que deba hacer otras cosas para que su componente se actualice, pero esta es la esencia de usar un observable. Tenga en cuenta que querrá darse de baja de la transmisión myBool$ en algún momento para evitar pérdidas de memoria y efectos secundarios inesperados.
Otra opción es usar la canalización asíncrona dentro de su plantilla en lugar de suscribirse explícitamente a la transmisión en el constructor. Eso también asegurará que la suscripción se elimine automáticamente. De nuevo, sin embargo, eso depende de lo que necesite hacer exactamente con los valores booleanos.
La respuesta de Sam es completamente correcta. Solo me gustaría agregar que también podría aprovechar un setter de TypeScript para activar automáticamente el evento para cambios:
@Injectable() export class MyBooleanService { myBool$: Observable<boolean>; private boolSubject: Subject<boolean>; private _myBool: Boolean; constructor() { this.boolSubject = new Subject<boolean>(); this.myBool$ = this.boolSubject.asObservable(); } set myBool(newValue) { this._myBool = newValue; this.boolSubject.next(newValue); } }