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.Come comunicare tra componente in Angolare?
risposta
È 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
@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
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
secondo link è rotto, correggilo se possibile –
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.
Ho trovato la risposta utile e lo ho svalutato, ma poi ho visto nell'altra pagina che è principalmente rilevante fino ad Angular 2: la risposta di Alex J è buona ma non funziona più con l'attuale Angular 4 a luglio 2017 – msanjay
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'}
});
}
}
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', '');
}
}
Dipende da cosa si vuole fare.Stai provando a provare a fare rpc, passare il messaggio o semplicemente condividere le variabili? –