Wie Daten zwischen zwei Komponenten in Angular übergeben werden 2

Question

Ich bin auf der Suche nach einer Lösung, um Daten an eine andere Komponente und ähnlich Zugriff auf Methoden einer anderen Komponente in anderen (beide sind parallele Komponenten). Zum Beispiel habe ich zwei Komponenten home.ts und map.ts. Ich bekomme einige Daten in map.ts und muss dies in home.ts und umgekehrt übergeben.

Answer 1

In Angular2 können Sie zwischen zwei Komponenten kommunizieren, indem Sie Objekt in HTML übergeben.

Beispiel

home.html:

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

Answer 2

können Sie Winkel 2 Eingänge verwenden, um Daten an eine Komponente für die Weitergabe. B. in Ihrer Kindklasse, eine Eingabevariable unter Verwendung von eckigem 2 @Input-Dekorator erstellen.

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

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

In Ihrem Stammkomponente (dh, in dem Sie Ihr Kind Komponente aufrufen, Ihre Parameter übergeben, wie folgt:

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

Ich empfehle Ihnen, diesen Artikel lesen auf vorbei und Argumente zwischen den Komponenten Empfangen (https://toddmotto.com/passing-data-angular-2-components-input)

Answer 3

Das Weiterleiten von Daten zwischen Komponenten ist ein Zwei-Wege-Prozess.In Ihrem Fall, sagen wir home.ts enthält ein Objekt mit dem Namen data.

1.In der home.component.html, wo Sie <map-component></map-component> verwendet haben, ersetzen Sie es durch <map-component [data]="data"></map-component>.

2.In der map.ts Datei, fügen Sie die Eingaben wie zum Beispiel:

@Input() data: string; 

3. Jetzt können Sie es in Ihrem Code verwenden wie als <p>{{data.title}}</p>

Ich hoffe es hilft!

Answer 4

Verwendung session, in Winkel wo Sie Daten setzen schreibe es als

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

, wenn Sie Ihr Objekt speichern wollen, dann schreiben als

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

dann die Komponente, wo Sie erhalten möchten der Wert rechts sessionStorage.getItem("key") oder für das ganze Objekt JSON.parse(sessonStorage.getKey("key");

Answer 5

In Angular 4 verwenden Sie @Input zu teilen Sie ein Objekt zwischen Eltern und Kind. Hier werden Änderungen an entweder megmor (im Elternteil) oder radfal (im Kind) im anderen widergespiegelt.

Eltern html:

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

Eltern ts:

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

Kinder html:

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

Kinder ts:

@Input() radfal: Kreven; 

Answer 6

Sie können Daten über den Service übertragen.

Stellen Sie einen Dienst her, der die Daten enthält, während Sie die Komponenten wechseln. Unten ist ein Beispiel.

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

} 

Jetzt 2 Komponenten Sender und Reciever Betrachten.

Absendercode: Dieser Code legt die Daten für den Dienst fest und navigiert zum Empfänger.

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

Reciever Kodex: Dieser Code, die Daten aus dem Dienst holt und die Daten löscht auch.

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