0

Necesito crear un observable que emita un booleano y se pueda cambiar mediante alguna función.

mostrar$ = new Observable<boolean>();

Necesito que mostrar$ sea false por defecto, y se pueda cambiar su valor desde una función.

cambiar() {
  this.mostrar$ = !this.mostrar$;
}

Estoy utilizando Angular2 y necesito subscribirme a este observable desde varios componentes.

¿Cuál sería la mejor manera de hacer esto?

3 respuestas 3

1

Para resolverlo puedes hacer uso de BehaviorSubject que es una variante de Subject el cual recibe un valor inicial y emite su valor actual cada vez que se suscribe

Esto lo puedes tener como un servicio

  import { Observable, BehaviorSubject } from 'rxjs';

  export class AnyService{
      public subject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);

      public changeValue(state: boolean): Observable<boolean> {
        subject.next(state)
    }
  }

luego en donde quieras obtener el valor accedes al servicio, usas la función para cambiar el valor y finalmente te suscribes

    constructor(private _anyService: AnyService) {}

    public observableFunction(): Observable<boolean> {
      return this._anyService.subject.asObservable();
    }

    ngOnInit() {
      /*emite un nuevo valor*/
      this._anyService.changeValue(true);
      
      /*y se suscribe*/
      observableFunction().subscribe(res => {console.log(res)})
    }

la consola devolverá true que fue el último valor que se emitió antes de suscribirse, la ventaja de este enfoque es que el valor puede ser detectado en cualquier componente que consuma el servicio

0

Agrego el ejemplo de un observable simple, espero te sirva

//  ejemplo observable simple

//funcion para mostrar u ocultar controles
const ocultarControles=function(valor)
{
 if(valor==true)
 {
  console.log('oculatando controles');
  }
  else
  {
  console.log('mostrando controles');
  }
}

//observable
const obsMostrarOcultar = bandera => Rx.Observable.of(bandera).toPromise().then(x => ocultarControles(x));
// oculta
 obsMostrarOcultar(false);
 
 //muestra
 obsMostrarOcultar(true);
<script src="https://npmcdn.com/@reactivex/[email protected]/dist/global/Rx.umd.js"></script>

0

Un Subject es una opción, ya que tienes el control del stream y al mismo tiempo lo puedes tratar como un Objservable.

En la implementacion muestra como puede ser usado:

import { Subject, Observable } from 'rxjs';

// Tu subject deberia ser privado, asi proteges su funcionalidad.
const sub = new Subject<boolean>();

// Tu funcion para solicitar el cambio
function mostrarComponentes(mostrar: boolean = true): void {
    sub.next(mostrar);
}

// Tu observable, el cual se puede exponer y extender con otros operadores
function mostrarComponentesObs(): Observable<boolean>{
  return sub.asObservable();
}

mostrarComponentesObs().subscribe(value => console.log(value));
mostrarComponentes();
mostrarComponentes(false);
mostrarComponentes(true);

Miralo funcionando

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.