navigationend - Componente Angular 2 escucha cambio en servicio

router events subscribe angular 4

Question

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!

Answer 1

La respuesta de Sam es completamente correcta. Solo quisiera agregar que también podría aprovechar un configurador de TypeScript para activar automáticamente el evento para los cambios:

@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);
}
}

Answer 2

Dependiendo de cómo los cambios booleanos, podría exponerlo como un Observable<boolean> en su servicio y luego suscribirse a esa secuencia en su componente. Su servicio se vería algo así 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 algunas otras cosas para que su componente se actualice, pero esto es lo esencial de usar un observable.

Otra opción es que use la tubería asíncrona dentro de su plantilla en lugar de suscribirse explícitamente a la secuencia en el constructor. Sin embargo, una vez más, eso depende de lo que necesitas hacer exactamente con los valores bool.