Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

160
Views
¿Cómo puedo detectar el cambio de la variable de servicio cuando se actualiza desde otro componente?

Estoy tratando de obtener el valor actualizado de una variable de servicio ( isSidebarVisible ) que se mantiene actualizado por otro componente ( header ) con un evento de clic ( toggleSidebar ).

barra lateral.servicio.ts

 import { Injectable } from '@angular/core'; import { Subject } from 'rxjs/Subject'; @Injectable() export class SidebarService { isSidebarVisible: boolean; sidebarVisibilityChange: Subject<boolean> = new Subject<boolean>(); constructor() { this.isSidebarVisible = false; } toggleSidebarVisibilty() { this.isSidebarVisible = !this.isSidebarVisible this.sidebarVisibilityChange.next(this.isSidebarVisible); } }

sidebar.component.ts

 export class SidebarComponent implements OnInit { asideVisible: boolean; _asideSubscription: any; constructor(private sidebarService: SidebarService) { this.asideVisible = sidebarService.isSidebarVisible this._asideSubscription = sidebarService.sidebarVisibilityChange.subscribe((value) => { this.asideVisible = value }) } ngOnInit() { } }

header.component.ts (donde se actualiza la variable de servicio)

 export class HeaderComponent implements OnInit { isSidebarVisible: boolean; _subscription: any; constructor(private sidebarService: SidebarService) { this._subscription = sidebarService.sidebarVisibilityChange.subscribe((value) => { this.isSidebarVisible = value }) } toggleSidebar() { this.sidebarService.toggleSidebarVisibilty() } ngOnInit() { } }

Puedo ver el cambio de valor de la variable de servicio en header.component.html cuando {{ isSidebarVisible }} pero en sidebar.component.html siempre imprime el valor predeterminado y nunca escucha los cambios.

Por favor ayúdame a arreglar esto.

about 4 years ago · Santiago Trujillo
2 answers
Answer question

0

Mueva la suscripción al servicio y ambos componentes podrán acceder a este valor. Si necesita valor solo una vez, puede usarlo directamente (como lo hice en sidebar.component ); Si necesita actualizar algo con este valor, puede usar getter (ejemplo en header.component ).

barra lateral.servicio.ts:

 @Injectable() export class SidebarService { isSidebarVisible: boolean; sidebarVisibilityChange: Subject<boolean> = new Subject<boolean>(); constructor() { this.sidebarVisibilityChange.subscribe((value) => { this.isSidebarVisible = value }); } toggleSidebarVisibility() { this.sidebarVisibilityChange.next(!this.isSidebarVisible); } }

sidebar.component.ts

 export class SidebarComponent { asideVisible: boolean; constructor(private sidebarService: SidebarService) { this.asideVisible = sidebarService.isSidebarVisible; } }

encabezado.componente.ts

 export class HeaderComponent { constructor(private sidebarService: SidebarService) { } get isSidebarVisible(): boolean { return this.sidebarService.isSidebarVisible; } toggleSidebar() { this.sidebarService.toggleSidebarVisibility() } }

También puede suscribirse al tema en uno o ambos componentes y obtener el valor allí:

 this.sidebarService.sidebarVisibilityChange.subscribe(value => {...});

Si quieres saber más sobre Temas echa un vistazo aquí .

about 4 years ago · Santiago Trujillo Report

0

@isherwood me puso en la pista, ¡gracias! Esta fue la pregunta y la respuesta que más se parecía a mi situación.

En mi caso, tengo un servicio de usuario en toda la aplicación que escucha los cambios en AngularFireAuth ( authState ) y cuando existe un usuario válido, configura un oyente para el documento AngularFirestore de ese usuario, que contiene la información del usuario como nombre, correo electrónico, color, lo que sea ( /usuariosaplicaciones/${usuario.id} ). Todas las páginas que necesitan algo de UserService obtienen esos datos en vivo, ya que es un oyente ( .subscribe() )

Mi problema era que las páginas dependían de que el documento del usuario estuviera listo (iniciar sesión y obtener el documento del usuario) antes de continuar con más cosas de la base de datos. Al navegar directamente a una página interna a través de enlaces profundos, la página intentaría hacer cosas de la base de datos antes de que el documento del usuario estuviera listo, lo que provocaría un error/bloqueo.

Siguiendo las instrucciones de @isherwoods anteriores, así es como me aseguro de que las páginas de mi aplicación esperen a que los datos del usuario estén listos antes de intentar hacer cosas adicionales con la base de datos:

usuario.servicio.ts

 export class UserService { userDocumentReady: boolean = false; // initial value is "userdoc is not ready" userDocObserver: Subject<boolean> = new Subject<boolean>(); // observing that bool constructor( public fireauth: AngularFireAuth, public afs: AngularFirestore, ) { // watch variable this.userDocObserver.subscribe(value => this.userDocumentReady = value); this.fireauth.authState .subscribe(user => { if (user) { this.afs.doc(`/tooluser/${user.uid}`).snapshotChanges() .subscribe(usr => { if (usr.payload.data()) { console.log(`got user object from database:`, usr.payload.data()); this.currentUser = usr.payload.data(); this.userDocObserver.next(true); // flip UserDocumentReady flag

mytools.page.ts

 // this is a logged-in page of the app, // accessible through deep link https://my.app.domain/mytools export class UsersPage implements OnInit { constructor( public userService: UserService, ) { } ngOnInit() { if (this.userService.userDocumentReady) { console.log(`users: userdoc already here, no need to wait`); this.setupPageData(); return; } // wait for userdoc before setting up page this.userService.userDocObserver.subscribe(docReady => { if (docReady){ console.log(`mytools: user ready value ${docReady}. now setup page.`); this.setupPageData(); // this function does the database stuff that depends on the user data to be ready first } }); }

Este "funciona" ahora y el comportamiento parece consistente. También es muy útil cuando se desarrolla, ya que escribir una URL en la barra del navegador provoca este tipo de navegación directa. Escribo esto para recordarlo, ¿y quién sabe si puede ser útil para otros?

Esta es solo mi segunda aplicación iónica, por lo que si algo está terriblemente mal con mi estructura/configuración, estoy muy interesado en los comentarios sobre esta solución :)

editar: verificación agregada en mytools.page.ts para que no esperemos (siempre) en un nuevo documento de usuario si ya existe uno

about 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!