Gli eventi dei componenti con EventEmitter e @Output in Angular

I componenti angolari sono gli elementi costitutivi fondamentali dell’architettura. Una volta che hai capito l’architettura dei componenti, puoi creare un’immagine nella tua testa su come assemblare l’interfaccia in base alla comunicazione dei dati.

In questo post ci immergeremo nei componenti angolari e su come utilizzare EventEmitter e Output, in modo da poter trasferire o notificare a qualsiasi componente genitore che qualcosa è cambiato, o vorremmo cambiarlo. Questo viene in genere fatto tramite “eventi”, quindi il nostro” EventEmitter ” ed è progettato attorno a un sistema di flusso di dati unidirezionale che adotta un approccio molto più ragionevole allo sviluppo di applicazioni.

Finalizziamo le basi della comunicazione genitore-figlio e figlio-genitore introducendo EventEmitter e @Output.

Serie

1. Bootstrap il tuo primo Angolare app
2. Creazione della prima Angolare componente
3. il Passaggio di dati in Angolare componenti con @
4. Componente di eventi con EventEmitter e @Uscita Angolare

Introduzione

Questo tutorial vi coperchio componente stateless eventi utilizzando EventEmitter API e @Output decoratore. Questi ci consentono di emettere modifiche o nomi di eventi personalizzati da un componente personalizzato in Angular.

Questo post segue dal precedente articolo sul passaggio dei dati in componenti angolari con @ Input, quindi assicurati di leggerlo prima!

Stateful (parent) component binding

Proprio come nel precedente tutorial, dove abbiamo impostato un decoratore @Input per accettare un binding di input, possiamo fare lo stesso e ascoltare nel genitore per quando un valore cambia all’interno del nostro componente figlio.

Per fare ciò, torneremo al nostro componente genitore che sta rendendo il nostro conteggio:

Ho fatto alcune aggiunte qui:

• Cambiato initialCount per myCount, non siamo più l’impostazione di un “initialCount”, quindi il conteggio di stato sarà gestito nel genitore una volta che il bambino componente rende una modifica
• Creato un custom change proprietà <counter> modello, l’utilizzo di evento sintassi di associazione, come abbiamo imparato quando abbiamo creato il nostro primo componente che indica un qualche tipo di evento (ad esempio un click quando viene utilizzato su un elemento naturale del Nodo).
• Ha registrato la proprietà myCount nel genitore
• Ha aggiunto un metodo countChange() {} alla classe e lo ha passato nel listener di eventi (change)

🎉 Scaricalo gratis!

Vai oltre l’array ForEach. Avere fiducia con metodi più avanzati come Ridurre, Trovare, Filtrare, Ogni, Alcuni e Mappa e comprendere appieno come gestire le strutture di dati JavaScript.

• Comprendere appieno come gestire le strutture dati JavaScript con operazioni immutabili
• 31 pagine di sintassi deep-dive, esempi del mondo reale, suggerimenti e trucchi
• Scrivi logica di programmazione più pulita e meglio strutturata entro 3 ore

✅ Successo! Controlla la tua email, buon divertimento.

Come bonus extra, ti invieremo anche alcune chicche extra attraverso alcune e-mail extra.

Questo imposta il nostro flusso di dati unidirezionale finalizzato. I dati fluiscono dalla classe AppComponent, nel`, il contatore può quindi modificare i valori – e una volta che il valore è cambiato ci aspettiamo che venga chiamato countChange(). Ora dobbiamo collegare questo.

@ Decoratore di uscita

Molto simile all’utilizzo di Input, possiamo importare Output e decorare una nuova proprietà change all’interno del nostro CounterComponent:

Questo configurerà i metadati necessari per dire ad Angular che questa proprietà deve essere trattata come un’associazione di output. Tuttavia, ha bisogno di sedersi accanto a qualcosa chiamato EventEmitter.

EventEmitter

Questa è la parte interessante. Per essere in grado di utilizzare il nostro Output, dobbiamo importare e associare una nuova istanza di EventEmitter ad essa:

Usando TypeScript al massimo faremmo qualcosa del genere per indicare il tipo di valore dell’evento che stiamo emettendo, e il nostro change output è di tipo EventEmitter. Nel nostro caso stiamo emettendo un tipo number:

Invocando EventEmitter

Quindi cosa sta succedendo qui? Abbiamo creato una proprietà change e abbiamo associato una nuova istanza di EventEmitter ad essa – cosa succederà dopo?

Possiamo semplicemente chiamare il nostro this.change metodo – tuttavia, poiché fa riferimento a un’istanza di EventEmitter, dobbiamo chiamare .emit() per l’emissione di un evento per il padre:

in Questo modo, quindi emettono un cambiamento alla nostra (change) listener che abbiamo impostato nel genitore, a cui il nostro countChange($event) callback viene richiamato, e i dati associati con l’evento ci sarà dato via il $event proprietà.

Assegnazione di callback stateful

Ecco cosa dovremo fare, riassegnare this.myCount con event che è passato indietro. Spiegherò perché di seguito:

Questo crea un flusso di dati unidirezionale puro. I dati provengono da AppComponent, fluiscono nel nostro contatore, il contatore apporta una modifica ed emette quel cambiamento al genitore sul nostro comando – tramite EventEmitter che abbiamo impostato. Una volta che abbiamo ottenuto che i dati di backup, uniamo le modifiche di nuovo nel nostro genitore (stateful) componente.

Il motivo per cui lo stiamo facendo è dimostrare che Parent: {{ myCount }} aggiorna contemporaneamente il nostro Output informa il genitore.

Bonus: nomi di proprietà personalizzati

Proprio come abbiamo imparato con @Input()e creando nomi di proprietà personalizzati, possiamo anche fare lo stesso con @Output().

Supponiamo di cambiare l’associazione (change) a (update):

Possiamo collegare il nostro nome di proprietà personalizzato, preservando il nome di proprietà @Output interno:

In sostanza, stiamo solo dicendo ad Angular qui di cercare update come proprietà a cui essere associati, e possiamo continuare a usare this.change internamente.

Quindi ce l’hai, la guida all’utilizzo di output con EventEmitter nei componenti di Angular. Ora capisci il modello, codifica felice!

Per saperne di più tecniche, le migliori pratiche e le conoscenze degli esperti del mondo reale, consiglio vivamente di controllare i miei corsi Angolari-ti guideranno attraverso il tuo viaggio verso la padronanza di Angular al massimo!