Proprietà personalizzate con binding bidirezionale
Esponga i propri input con binding bidirezionale.
Proprietà personalizzate con binding bidirezionale è una lezione Angular Academy gratuita su CoddyKit. Questa è la lezione 4 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.
Two-way binding personalizzato
Può rendere associabile in entrambe le direzioni qualsiasi proprietà di un componente. Angular supporta due approcci: la coppia classica @Input più @Output oppure il signal moderno model().
La convenzione di denominazione
Affinché il two-way binding funzioni, il nome dell'output deve essere il nome dell'input seguito dal suffisso Change. Ad esempio, all'input size deve corrispondere l'output sizeChange.
Dichiarazione dell'input
Inizi con un input ordinario che il componente padre può impostare.
import { Input } from "@angular/core";
export class RatingComponent {
@Input() value = 0;
}Dichiarazione dell'output corrispondente
Aggiunga un EventEmitter @Output denominato con il suffisso Change.
import { Input, Output, EventEmitter } from "@angular/core";
export class RatingComponent {
@Input() value = 0;
@Output() valueChange = new EventEmitter<number>();
}Emissione durante l'aggiornamento
Quando il componente modifica internamente il valore, aggiorni la proprietà ed emetta il nuovo valore, così il componente padre rimane sincronizzato.
setValue(v: number) {
this.value = v;
this.valueChange.emit(v);
}Binding dal componente padre
Ora il componente padre può usare la sintassi banana-in-a-box con la Sua proprietà personalizzata.
<app-rating [(value)]="score"></app-rating>
// parent
score = 3;Esempio completo di input/output
Ecco un componente completo con two-way binding personalizzato, che usa l'API classica.
@Component({
selector: "app-rating",
template: "<button (click)='bump()'>{{ value }}</button>"
})
export class RatingComponent {
@Input() value = 0;
@Output() valueChange = new EventEmitter<number>();
bump() {
this.value++;
this.valueChange.emit(this.value);
}
}L'approccio moderno con model
Lo stesso comportamento richiede molto meno codice con model(), che crea per Lei la coppia input/output.
import { model } from "@angular/core";
@Component({
selector: "app-rating",
template: "<button (click)='bump()'>{{ value() }}</button>"
})
export class RatingComponent {
value = model(0);
bump() { this.value.update(v => v + 1); }
}Confronto tra i due approcci
La coppia classica è esplicita e funziona ovunque; model() è concisa e basata sui signal. Entrambe espongono ai componenti padre lo stesso binding [(value)].
Più proprietà con two-way binding
Un componente può esporre diverse proprietà associabili in entrambe le direzioni, ciascuna secondo la convenzione input/inputChange.
@Input() min = 0;
@Output() minChange = new EventEmitter<number>();
@Input() max = 100;
@Output() maxChange = new EventEmitter<number>();Scelta dell'approccio
Per il nuovo codice, preferisca model() per la sua concisione e l'integrazione con i signal. Usi la coppia input/output esplicita quando serve un controllo dettagliato o non utilizza i signal.
Verifica rapida
Verifichi la Sua comprensione delle proprietà personalizzate con two-way binding.
Riepilogo
Il two-way binding personalizzato richiede un input e un output denominato inputChange, che emetta a ogni aggiornamento. Il signal moderno model() crea automaticamente questa coppia ed è la scelta più concisa per il nuovo codice.
Domande Frequenti
La lezione «Proprietà personalizzate con binding bidirezionale» è gratuita?
Sì — il testo completo di «Proprietà personalizzate con binding bidirezionale» è 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 «Proprietà personalizzate con binding bidirezionale»?
Esponga i propri input con binding bidirezionale. 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 4 di 4.
Quanto tempo richiede la lezione «Proprietà personalizzate con binding bidirezionale»?
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
- Riepilogo del binding di proprietà ed eventi
- Binding bidirezionale con ngModel
- Input signal model()
- Proprietà personalizzate con binding bidirezionale