Angular Academy · Lezione

Output con output()

Emetta eventi con la nuova API output.

Output con output() è una lezione Angular Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Angular Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Angular Academy include 4 lezioni in totale.

Output nell'era dei signals

Insieme agli input signal, Angular moderno offre la funzione output() per dichiarare gli eventi dei componenti, sostituendo il classico @Output con EventEmitter.

Dichiarazione di un output

Chiami output() per creare un evento che il componente può emettere. Fornisca un tipo generico per il payload.

import { Component, output } from "@angular/core";

@Component({ selector: "app-counter", template: "" })
export class CounterComponent {
  changed = output<number>();
}

Emissione di un evento

Chiami emit sull'output per inviare un valore agli ascoltatori.

export class CounterComponent {
  changed = output<number>();
  count = 0;
  inc() {
    this.count++;
    this.changed.emit(this.count);
  }
}

Ascolto dal componente padre

Il componente padre si iscrive tramite l'associazione di eventi, utilizzando $event per il payload emesso.

<app-counter (changed)="onChange($event)"></app-counter>

// parent
onChange(value: number) {
  this.total = value;
}

Output senza payload

Per gli eventi che non trasportano dati, utilizzi output<void>() ed emetta senza argomenti.

closed = output<void>();

close() {
  this.closed.emit();
}

output e EventEmitter

L'API output() è più semplice e non è legata a RxJS. Non deve creare un'istanza di EventEmitter; se ne occupa la funzione.

// classic:
@Output() changed = new EventEmitter<number>();

// modern:
changed = output<number>();

Alias di un output

Esponga un nome di evento pubblico diverso con l'opzione alias.

valueChange = output<number>({ alias: "change" });

<!-- parent listens with the alias -->
<app-counter (change)="onChange($event)"></app-counter>

Output e associazione bidirezionale

L'associazione di un input con un output denominato xChange abilita l'associazione bidirezionale, anche se model() lo fa in modo più conciso.

value = input(0);
valueChange = output<number>();
// enables [(value)] on the parent

Derivazione degli output dagli Observable

L'helper di interoperabilità outputFromObservable trasforma un Observable in un output, collegando gli stream RxJS alla nuova API.

import { outputFromObservable } from "@angular/core/rxjs-interop";

clicks = outputFromObservable(this.clicks$);

Sicurezza dei tipi

Poiché gli output sono tipizzati, il parametro del gestore nel componente padre viene verificato rispetto al tipo del payload emesso, individuando le incompatibilità in fase di compilazione.

selected = output<{ id: number }>();

<!-- parent must accept { id: number } -->
<app-list (selected)="pick($event)"></app-list>

Quando utilizzare output

Preferisca output() per i nuovi componenti: è più leggero, sicuro rispetto ai tipi e si abbina naturalmente agli input signal per modellare la comunicazione tra componenti.

Verifica rapida

Verifichi la Sua comprensione della funzione output.

Riepilogo

La funzione output() dichiara eventi tipizzati senza EventEmitter. Emetta con emit(), ascolti tramite l'associazione di eventi e $event, definisca un alias quando necessario e abbini gli output agli input signal per una comunicazione pulita tra componenti.

Domande Frequenti

La lezione «Output con output()» è gratuita?

Sì — il testo completo di «Output con output()» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Angular Academy, passa a CoddyKit PRO. Il corso Angular Academy include 4 lezioni in totale.

Cosa imparerò in «Output con output()»?

Emetta eventi con la nuova API output. Eserciti Angular Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Angular Academy?

Non è richiesta alcuna esperienza precedente. Angular Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.

Quanto tempo richiede la lezione «Output con output()»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Angular Academy?

Sì. Ogni lezione Angular Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a Angular Academy