Come passare i dati tra due componenti in Angular 2

È ansible trasferire i dati utilizzando il servizio.

Crea un servizio che trattiene i dati mentre cambi i componenti. Di seguito è un esempio.

 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; } } 

Ora considera 2 componenti Mittente e Ricevitore.

Codice mittenti : questo codice imposta i dati sul servizio e naviga verso il destinatario.

 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 } } 

Codice del destinatario : questo codice recupera i dati dal servizio e cancella anche i dati.

 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'); } } } 

È ansible utilizzare gli ingressi angolari 2 per trasferire dati a un componente. Ad esempio, nella class figlia, creare una variabile di input usando il decoratore angular 2 @Input.

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

Nel tuo componente principale (cioè in cui stai chiamando il tuo componente figlio, passa i parametri come segue:

Vi consiglio di leggere questo articolo sul passaggio e la ricezione di argomenti tra componenti ( https://toddmotto.com/passing-data-angular-2-components-input ).

Il passaggio dei dati tra i componenti è un processo a due vie. Nel tuo caso, diciamo home.ts contiene un object chiamato come data .

1. Nel home.component.html , dove hai usato , sostituiscilo con .

2. map.ts file map.ts , aggiungi gli input come:

 @Input() data: string; 

3. Ora puoi usarlo nel tuo codice come

   {{data.title}}

Spero che sia d’aiuto!

Usa sessionStorage, in angular dove vuoi impostare i dati scrivilo come

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

se vuoi memorizzare il tuo object allora scrivi come

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

quindi il componente in cui si desidera ottenere il valore giusto sessionStorage.getItem("key") o per l’intero object JSON.parse(sessonStorage.getKey("key");

In Angular2 puoi comunicare tra due componenti passando l’object in html.

Esempio

home.html:

 ...  ... 

In Angular 4 usa @Input per condividere un object tra genitore e figlio. Qui, le modifiche a megmor (nel genitore), o radfal (nel bambino), si rifletteranno nell’altro.

Html padre:

 
  {{megmor.pergal}}  

Parent ts:

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

Html figlio:

 
 
{{radfal.pergal}}
 Peragl:    

Bambino:

 @Input() radfal: Kreven;