Benutzerdefinierte Two-Way-bindbare Properties
Stellen Sie eigene Two-Way-bindbare Inputs bereit.
Benutzerdefinierte Two-Way-bindbare Properties ist eine kostenlose Angular Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Angular Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.
Benutzerdefiniertes Two-Way Binding
Sie können jede Komponenteneigenschaft für Two-Way Binding verfügbar machen. Angular unterstützt zwei Ansätze: das klassische Paar aus @Input und @Output oder das moderne model()-Signal.
Die Namenskonvention
Damit Two-Way Binding funktioniert, muss der Output-Name dem Input-Namen mit dem Suffix Change entsprechen. Der Input size benötigt beispielsweise den Output sizeChange.
Den Input deklarieren
Beginnen Sie mit einem gewöhnlichen Input, den die übergeordnete Komponente setzen kann.
import { Input } from "@angular/core";
export class RatingComponent {
@Input() value = 0;
}Den passenden Output deklarieren
Fügen Sie einen @Output-EventEmitter hinzu, dessen Name das Suffix Change trägt.
import { Input, Output, EventEmitter } from "@angular/core";
export class RatingComponent {
@Input() value = 0;
@Output() valueChange = new EventEmitter<number>();
}Bei einer Aktualisierung ein Ereignis auslösen
Wenn die Komponente den Wert intern ändert, aktualisieren Sie die Eigenschaft und geben Sie den neuen Wert aus, damit die übergeordnete Komponente synchron bleibt.
setValue(v: number) {
this.value = v;
this.valueChange.emit(v);
}Von der übergeordneten Komponente binden
Nun kann die übergeordnete Komponente die Banana-in-a-Box-Syntax für Ihre benutzerdefinierte Eigenschaft verwenden.
<app-rating [(value)]="score"></app-rating>
// parent
score = 3;Vollständiges Input/Output-Beispiel
Hier ist eine vollständige benutzerdefinierte Komponente mit Two-Way Binding, die die klassische API verwendet.
@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);
}
}Der moderne model-Ansatz
Dasselbe Verhalten lässt sich mit model() deutlich kürzer umsetzen, da die Funktion das Input/Output-Paar automatisch für Sie erstellt.
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); }
}Die beiden Ansätze vergleichen
Das klassische Paar ist explizit und funktioniert überall; model() ist kompakt und signalbasiert. Beide stellen übergeordnete Komponenten dasselbe [(value)]-Binding bereit.
Mehrere Two-Way-Eigenschaften
Eine Komponente kann mehrere Eigenschaften für Two-Way Binding bereitstellen, die jeweils der Konvention input/inputChange folgen.
@Input() min = 0;
@Output() minChange = new EventEmitter<number>();
@Input() max = 100;
@Output() maxChange = new EventEmitter<number>();Einen Ansatz auswählen
Bevorzugen Sie in neuem Code model() wegen seiner Kürze und der Signal-Integration. Verwenden Sie das explizite Input/Output-Paar, wenn Sie eine genaue Kontrolle benötigen oder keine Signals verwenden.
Kurze Überprüfung
Testen Sie Ihr Verständnis von benutzerdefinierten Eigenschaften mit Two-Way Binding.
Zusammenfassung
Benutzerdefiniertes Two-Way Binding benötigt einen Input sowie einen Output mit dem Namen inputChange, der bei jeder Aktualisierung einen Wert ausgibt. Das moderne model()-Signal erstellt dieses Paar automatisch und ist die kompakte Wahl für neuen Code.
Häufig gestellte Fragen
Ist die Lektion „Benutzerdefinierte Two-Way-bindbare Properties“ kostenlos?
Ja — der vollständige Text von „Benutzerdefinierte Two-Way-bindbare Properties“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Angular Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Benutzerdefinierte Two-Way-bindbare Properties“?
Stellen Sie eigene Two-Way-bindbare Inputs bereit. Du übst Angular Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Angular Academy zu starten?
Keine Vorkenntnisse erforderlich. Angular Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.
Wie lange dauert die Lektion „Benutzerdefinierte Two-Way-bindbare Properties“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Angular Academy-Lektion Code schreiben und ausführen?
Ja. Jede Angular Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Rückblick auf Property- und Event-Binding
- Two-Way-Binding mit ngModel
- model()-Signal-Inputs
- Benutzerdefinierte Two-Way-bindbare Properties