5

Estoy intentando hacer la comunicación entre un componente y otro, que están en diferentes vistas. En el primer componente hay un input, y lo que quiero hacer es que cuando se pulse el botón enviar con un texto escrito, se acceda a una nueva vista y en el nuevo componente, recuperar el texto y mostrarlo en la nueva vista.

¿Tenéis alguna idea?

He probado a hacerlo como aparece aquí, pero sólo vale para componentes que están en la misma vista:

https://angularfirebase.com/lessons/sharing-data-between-angular-components-four-methods/#Unrelated-Components-Sharing-Data-with-a-Service

6
  • A que te refieres con la misma vista? Que se encuentra en otra página?
    – lDanny7
    el 28 jun. 2018 a las 8:24
  • Sí, eso es, que está en otra página
    – neo
    el 28 jun. 2018 a las 8:28
  • ¿Diferente pestaña? el 28 jun. 2018 a las 8:31
  • Lo ideal sería que también se pudiese ver en una pestaña diferente
    – neo
    el 28 jun. 2018 a las 8:32
  • Hombre yo entiendo como otra página otra pestaña, puedes mostrar en una imagen donde estaría cada componente? Vale entiendo con otra vista que usaras el Router para cambiar de vista, para ello le puedes pasar como parametro al Router antes de ir a la nueva vista
    – lDanny7
    el 28 jun. 2018 a las 8:36

1 respuesta 1

6

Quizá la pregunta es demasiado amplia, así que no te puedo dar una solución precisa, pero vamos a intentar aclarar ideas. Si tienes dos componentes en una aplicación que tienen que compartir datos, las formas de hacerlo varían dependiendo de la relación entre estos componentes:

Si un componente es padre del otro

  • El componente padre pasa información al hijo al declarar su uso en la plantilla:

    En el padre tendrás algún atributo declarado (llamémosle datos):

    <app-componente-hijo [entrada]="datos"> </app-componente-hijo>
    

    Y en el hijo tendrás declarado un input:

    @Input() entrada;
    
  • El hijo manda información al padre:

    <app-componente-hijo (onDataReceived)="leerDatos($event)"> </app-componente-hijo>
    

    Aquí el hijo declara con @Output() un emisor (EventEmitter) al que el padre se suscribe pasándole la función que tratará los datos.

Si los componentes tienen un padre común

Este caso es similar a los anteriores: el componente padre puede recibir/enviar datos de un hijo a otro mediante input/output

Si los componentes no tienen relación más allá de estar en la misma instancia de la aplicación

En este caso lo habitual es usar un servicio: un componente usa dicho servicio para enviar los datos y el otro componente los usa para recibirlos (la comunicación puede ser bidireccional). El servicio puede mantener los datos en memoria (una variable hace de buffer temporal) o puede guardarlos en algún sitio más persistente (localStorage en el navegador o incluso podría mandar los datos al servidor).

Si los componentes están en distintas instancias de la aplicación

Es decir, tienes dos pestañas abiertas con la misma aplicación en el mismo navegador. Esto es el equivalente a tener dos aplicaciones de escritorio abiertas y tratar de comunicar dos objetos de cada aplicación: necesitas algo externo a las aplicaciones, como pueda ser el servidor o el localStorage (si tienes una clase servicio tipo LocalStorageService, tendrás dos instancias, pero comparten la memoria del navegador)

2
  • Justo es este último caso, tal y como aparece en el link que puse más arriba: angularfirebase.com/lessons/…. Sin embargo, sólo consigo la comunicación entre los componentes si están en la misma página. Imagino que la solución es usar el localStorage ¿no?
    – neo
    el 28 jun. 2018 a las 15:45
  • Si con página te refieres a pestaña del navegador, sí: cada pestaña es una aplicación totalmente distinta, aunque pueden compartir la información en el Storage. He actualizado la respuesta acorde con ese escenario el 28 jun. 2018 a las 15:47

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.