Cómo pasar datos entre dos componentes en Angular 2

Estoy buscando una solución para pasar datos a otro componente y de forma similar acceder a los métodos de otro componente en otro (ambos son componentes paralelos).

Por ejemplo, tengo dos componentes home.ts y map.ts Obtengo algunos datos en map.ts y necesito pasarlos en home.ts y viceversa.

Puede transferir datos mediante el servicio.

Haga un servicio que contenga los datos mientras cambia los componentes. A continuación hay un ejemplo.

 import { Injectable } from '@angular/core'; @Injectable() export class TransfereService { constructor( private router:Router, private companyServiceService:CompanyServiceService ) { } private data; setData(data){ this.data = data; } getData(){ let temp = this.data; this.clearData(); return temp; } clearData(){ this.data = undefined; } } 

Ahora considere 2 componentes Sender y Reciever.

Código de remitentes : este código establece los datos en el servicio y navega hacia el receptor.

 import { Router } from '@angular/router'; import { TransfereService } from './services/transfer.service'; export class SenderComponent implements OnInit { constructor( private transfereService:TransfereService, private router:Router) {} somefunction(data){ this.transfereService.setData(data); this.router.navigateByUrl('/reciever');//as per router } } 

Código de Reciever : Este código recupera los datos del servicio y borra los datos también.

 import { Router } from '@angular/router'; import { TransfereService } from './services/transfer.service'; export class RecieverComponent implements OnInit { data = this.transfereService.getData(); constructor( private transfereService:TransfereService, private router:Router) { if(this.data){ // do whatever needed } else{ this.router.navigateByUrl('/sender'); } } } 

Puede usar 2 entradas angulares para pasar datos a un componente. Por ejemplo, en su clase secundaria, cree una variable de entrada utilizando el decodificador angular 2 @Input.

 import {Component, Input} from 'angular2/core'; @Component({ selector: 'child', styles: [` `], template: ` ` }) export class ChildComponent { @Input() valueToPass = 0; } 

En su componente principal (es decir, en el que está llamando a su componente hijo, pase su parámetro de la siguiente manera:

  

Te recomiendo que leas este artículo sobre cómo pasar y recibir argumentos entre los componentes ( https://toddmotto.com/passing-data-angular-2-components-input ).

Pasar datos entre componentes es un proceso bidireccional. En su caso, digamos home.ts contiene un objeto denominado como data .

1.En home.component.html , donde utilizó , reemplácelo por .

2.En el archivo map.ts , agregue las entradas como:

 @Input() data: string; 
  1. Ahora puedes usarlo en tu código como

    {{data.title}}

¡Espero eso ayude!

Use sessionStorage, en angular donde quiera establecer datos, escríbalo como

 sessionStorage.setItem("key","value"); 

si desea almacenar su objeto, escriba como

 sessionStorage.setItem("key", JSON.stringify(obj)); 

luego, el componente donde desea obtener el valor correcto sessionStorage.getItem("key") o para el objeto completo JSON.parse(sessonStorage.getKey("key");

En Angular2 puede comunicarse entre dos componentes pasando el objeto en html.

Ejemplo

home.html:

 ...  ... 

En Angular 4, use @Input para compartir un objeto entre padre e hijo. Aquí, los cambios a megmor (en el padre), o a radiff (en el niño), se reflejarán en el otro.

Padre html:

 
{{megmor.pergal}}

Padres ts:

 let megmor = new Kreven(); this.megmor.pergal = "warbar"; 

Html hijo:

 

{{radfal.pergal}}

Niño ts:

 @Input() radfal: Kreven;