Jak przekazywać dane między dwoma komponentami w Angular 2

Question

Szukam rozwiązania przekazywania danych do innego komponentu i podobnie dostępu metod innych komponentów w innych (oba są składnikami równoległymi).

Na przykład mam dwa składniki home.ts i map.ts. Dostaję pewne dane do map.ts i trzeba je przekazać w home.ts i na odwrót.

Answer 1

W Angular2 można komunikować się między dwoma komponentami, przekazując obiekt w html.

Przykład

home.html:

... 
<map_selector [ObjectInMap]="ObjectInHome" ></map_selector> 
... 

Answer 2

można użyć kątowych 2 wejścia do przekazywania danych do elementu. Np. W klasie potomnej, wprowadź zmienną wejściową za pomocą dekoratora kątowego 2 @ Input.

import {Component, Input} from 'angular2/core'; 

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

W komponentu nadrzędnego (czyli w której dzwonisz swój składnik dzieci, zdać parametr w następujący sposób:

<child [valueToPass] = "value"></child> 

polecam czytanie tego artykułu na przejściu i odbieranie argumentów między elementami (https://toddmotto.com/passing-data-angular-2-components-input).

Answer 3

przekazywanie danych pomiędzy komponentami jest procesem dwukierunkowym. W twoim przypadku, powiedzmy home.ts zawiera obiekt o nazwie jak data.

1.W home.component.html, gdzie użyłeś <map-component></map-component>, zamień go na <map-component [data]="data"></map-component>.

2.In pliku map.ts, dodać wejść jak jak:

@Input() data: string; 

3. Teraz można go używać w kodzie jak jak <p>{{data.title}}</p>

Mam nadzieję, że to pomoże!

Answer 4

Zastosowanie sessionStorage w kanciasty, gdzie chcesz ustawić dane zapisać go jako

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

jeśli chcesz zapisać obiekt następnie napisać jak

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

wówczas element, w którym chcesz się wartość prawidłowa sessionStorage.getItem("key") lub dla całego obiektu JSON.parse(sessonStorage.getKey("key");

Answer 5

W ustawieniu kątowym 4 użyj @Input na udostępnij obiekt między rodzicem a dzieckiem. Tutaj zmiany w megmor (w rodzicu) lub radfal (w dziecku) będą widoczne w drugim.

nadrzędna html:

<div> 
    <zoptil [radfal]="megmor"></zoptil> 
    {{megmor.pergal}} 
</div> 

Parent ts: html

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

dziecka:

<div> 
    <h2>{{radfal.pergal}}</h2> 
    <label>Peragl: </label> 
    <input [(ngModel)]="radfal.pergal" /> 
</div> 

ts dziecko:

@Input() radfal: Kreven; 

Answer 6

Możesz przesyłać dane za pomocą usługi.

Utwórz usługę przechowującą dane podczas przełączania komponentów. Poniżej znajduje się przykład.

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

} 

Rozważmy teraz 2 komponenty Nadawca i odbiorca.

Kod nadawcy: Ten kod ustawia dane w usłudze i przechodzi do odbiornika.

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

Receiver Kod: Ten kod pobiera dane z serwisu i kasuje dane, jak również.

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