1

Tengo una web que se divive en header, footer, content y sidebar. En el header tengo dos desplegables relacionados entre sí. Supongamos que el primer desplegable es un desplegable de padres y el segundo desplegable es de hijos. Cuando selecciono un padre nuevo el desplegable de hijos se actualiza con nuevos valores. Hasta ahí todo bien.

Tanto padre como hijos los muevo a través de la aplicación usando

localStorage.setItem('father', this.father);

localStorage.setItem('son', this.son);

Una vez setea esos valores en el content tengo que coger el id del hijo seleccionado y llamar a un servicio para localizarlos a través de un mapa (con latitud y longitud).

Este es el proceso que uso

Header.ts

  ngOnInit() {
    this.usuario = localStorage.getItem("user");
    this.entityCtrl.getEntityByUser(this.usuario).subscribe(
      response => {
        this.allFathers= response["body"];
        this.father =
          parseInt(localStorage.getItem("father")) != null
            ? parseInt(localStorage.getItem("father"))
            : this.allFathers[0]["id"];
        localStorage.setItem("father", this.father.toString());
      },

      (error: any) => {
        console.log(error);
      },

      () => {
        this.entityCtrl
          .getGroupsByEntityAndUser(
            localStorage.getItem("father"),
            localStorage.getItem("user")
          )
          .subscribe(
            response => {
              this.AllSons= response["body"];
              this.son=
                parseInt(localStorage.getItem("son")) != null
                  ? parseInt(AllSons.getItem("som"))
                  : this.groupsTodos[0]["id"];
              localStorage.setItem("son", this.grupo.toString());
            },
            (error: any) => {
              console.log(error);
            }
          );
      }
    );
  }

Content.ts

  ngOnInit() {
    console.log(localStorage.getItem("grupo")) VALOR NO LLEGA
    this.dashboardCtrl.getMarkers(localStorage.getItem("son")).subscribe(
      response => {
        this.markers = response["body"]["data"];
        this.timezone = response["body"]["timezone"];
      },
      error => {
        console.log(error);
      }
    );

El problema es que el valor de son no llega al content y por tanto no carga los datos de la página. Es curioso porque no llega la primera vez que inicias, pero cuando recargas la página (F5) si que llegan los valores y funciona todo correctamente. Deduzo que es un error de asincronia.

Obviamente al no cargar el parametro en la URL el valor me sale como nulo.

Ej: ENDPOINT/hijo/null (aquí deberia tener el id del hijo seleccionado en el desplegable).

He probado con 'resolve' y utilizando servicios pero no lo he conseguido arreglar, no parece que sea que sea un error de que se pierden los datos, sino un error de lógica, carga la vista antes que los servicios.

¿Alguna idea de como puedo arreglar este problema?

UPDATE

Perdón por tardar en responder, he estado haciendo pruebas hasta ahora. Aparentemente "funciona" no da fallo la consola, pero extrañamente no carga nada. Es decir, hago el subscribe del "hijo" y cuando completa lanzo el resto de servicios. En this.son carga el id del hijo correctamente, pero no pasa al proceso de obtener marcadores. Es como si 'esperase' a completar el subscribe de obtención del id eternamente.

this.globalCtrl.getSon().subscribe(
          response => {
            this.son= response;
          },
          error => {
            console.log(error);
          },
          () => {
            this.dashboardCtrl.getMarkers(this.son).subscribe(

              response => {
console.log(response) // No llega
                this.markers = response["body"]["data"];
                if (this.markers.length == 0) {
                  this.toast.fire({
                    type: "error",
                    title: "No hay datos geográficos del grupo seleccionado"
                  });
                }
                this.timezone = response["body"]["timezone"];
              },
              error => {
                console.log(error);
              }
            );

1 respuesta 1

1

Creo que tu pregunta realmente es ¿Cómo comunicar dos componentes de manera asíncrona?

Y la respuesta es usando un servicio. Este servicio puede ser algo tan simple como

@Injectable()
export class MessageService {

    private subject = new Subject<any>();

    sendMessage(message: any) {
        this.subject.next(message);
    }

    clearMessage() {
        this.subject.next();
    }

    getMessage(): Observable<any> {
        return this.subject.asObservable();
    }
}

Un componente puede mandar información (cualquier objeto) y todos los que se suscriban podrán ir recibiendo los mensajes. Por supuesto podrías complicar este servicio más según tus necesidades (suscribirse a un mensaje en particular, por ejemplo, usar los eventos del localStorage... etc.

Puedes ver una prueba de concepto aquí

1

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.