Come comunicare tra componente in Angolare?

Question

Sto lavorando a un progetto di app Web e sto cercando di utilizzare Angular, ho qualche problema con la comunicazione di componenti. Ad esempio, in che modo un componente padre scambia i dati con un componente figlio, come comunicare tra i componenti dei fratelli.

Answer 1

È necessario utilizzare l'iniezione di dipendenza. Ecco un piccolo esempio: https://github.com/gdi2290/angular2do/blob/gh-pages/app/components/todo-item/todo-item.js

Answer 2

1. @Input e @Output

   Se ci sono componenti più parti è possibile utilizzare @Input e @Output per lo scambio di dati. documento: https://angular.io/guide/component-interaction

   esempio: https://angular.io/generated/live-examples/component-interaction/eplnkr.html

2. Dependency Injection

   è possibile memorizzare i dati in servizio, e poi iniettare in servizio il componente che si desidera. come ad esempio "user.server.ts" nell'esempio:

   https://angular.io/generated/live-examples/dependency-injection/eplnkr.html

Answer 3

Se si sta tentando di comunicare da un componente genitore di un componente figlio, questo è abbastanza chiaramente descritto utilizzando @Input e EventEmitters con @Output nei documenti angolari.

Angular 2 component interaction

Per quanto riguarda la comunicazione tra fratelli e sorelle, ho postato una risposta in una domanda simile che potrebbe aiutare con la questione della condivisione dei dati tra i componenti di pari livello. Attualmente, penso che il metodo di servizio condiviso sia il più efficiente.

angular-2-sibling-component-communication

Answer 4

Utilizzando un servizio:

import { Injectable } from '@angular/core'; 
import { Subject } from 'rxjs/Subject'; 

@Injectable() 
export class AppState { 
    public _subject = new Subject<object>(); 
    public event = this._subject.asObservable(); 

    public publish(data: any) { 
    this._subject.next(data); 
    } 
} 

ed è possibile pubblicare i messaggi di evento simile come questo:

export class AppComponent { 
    constructor(
    public appState: AppState 
) { 
    appState.publish({data: 'some data'}); 
    } 
} 

ed è possibile iscriversi a questi eventi:

export class HomeComponent { 
    constructor(
    public appState: AppState 
) { 
    appState.event.subscribe((data) => { 
     console.log(data); // {data: 'some data'} 
    }); 
    } 
} 

Answer 5

C'è Eventi in API in angolare che può farlo per voi.

Click here for more details on Events.

Qui di seguito un breve esempio Attualmente sto usando nel mio progetto. Spero che aiuti qualcuno nel bisogno.

importazione {Eventi} da 'ionico-angolare';

Usage:

constructor(public events: Events) { 
     /*========================================================= 
     = Keep this block in any component you want to receive event response to   = 
     ==========================================================*/ 
     // Event Handlers 
     events.subscribe('menu:opened',() => { 
      // your action here 
      console.log('menu:opened'); 
     }); 
     events.subscribe('menu:closed',() => { 
      // your action here 
      console.log('menu:closed'); 
     }); 
    } 

    /*===================================================== 
    = Call these on respective events - I used them for Menu open/Close   = 
    ======================================================*/ 

    menuClosed() { 
     // Event Invoke 
     this.events.publish('menu:closed', ''); 
    } 
    menuOpened() { 
     // Event Invoke 
     this.events.publish('menu:opened', ''); 
    } 

    }