Angular Academy · Lektion

Erforderliche und transformierte Inputs

Markieren Sie Inputs als erforderlich und transformieren Sie Werte.

Erforderliche und transformierte Inputs ist eine kostenlose Angular Academy-Lektion auf CoddyKit. Dies ist Lektion 2 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.

Über grundlegende Inputs hinaus

Signal-Inputs unterstützen zwei leistungsstarke Funktionen: Sie können einen Input als erforderlich markieren und eingehende Werte transformieren, bevor sie gespeichert werden.

Erforderliche Inputs

Verwenden Sie input.required(), wenn der Parent immer einen Wert bereitstellen muss. Es gibt keinen Standardwert.

import { input } from "@angular/core";

export class UserComponent {
  userId = input.required<string>();
}

Warum erforderliche Inputs wichtig sind

Wenn ein erforderlicher Input nicht gebunden ist, meldet Angular einen Fehler. Dadurch werden Fehler früh erkannt, anstatt dass ein undefined-Wert unbemerkt weitergegeben wird.

<!-- error: userId is required -->
<app-user></app-user>

<!-- correct -->
<app-user [userId]="id"></app-user>

Erforderliche Inputs sind nicht null

Da ein erforderlicher Input bereitgestellt werden muss, ist sein Typ niemals undefined. Sie können ihn daher sicher auslesen, ohne Nullprüfungen durchzuführen.

userId = input.required<string>();
load() {
  return this.api.get(this.userId()); // always a string
}

Inputs transformieren

Die Option transform führt eine Funktion für den eingehenden Wert aus, bevor dieser gespeichert wird. Das ist beispielsweise für eine Typumwandlung nützlich.

import { input } from "@angular/core";

export class ToggleComponent {
  disabled = input(false, { transform: (v: unknown) => !!v });
}

Boolesche Werte umwandeln

Angular stellt booleanAttribute bereit, um attributartige Werte in echte boolesche Werte umzuwandeln. Das ist praktisch für Attribute, deren Vorhandensein den Wert bestimmt.

import { input, booleanAttribute } from "@angular/core";

disabled = input(false, { transform: booleanAttribute });

<!-- both work -->
<app-btn disabled></app-btn>
<app-btn [disabled]="true"></app-btn>

Zahlen umwandeln

Entsprechend wandelt numberAttribute ein Zeichenkettenattribut in eine Zahl um.

import { input, numberAttribute } from "@angular/core";

count = input(0, { transform: numberAttribute });

<!-- string "5" becomes number 5 -->
<app-counter count="5"></app-counter>

Benutzerdefinierte Transformationsfunktionen

Sie können beliebige Transformationen schreiben, um Werte zu normalisieren, beispielsweise indem Sie Zeichenketten trimmen.

label = input("", {
  transform: (v: string) => v.trim()
});

Eingabe- und Ausgabetypen der Transformation

Eine Transformation kann einen Typ akzeptieren und einen anderen speichern. Der akzeptierte Typ wird von Parents gebunden; der gespeicherte Typ wird von Ihnen ausgelesen.

// accepts string | number, stores number
size = input(0, {
  transform: (v: string | number) => Number(v)
});

Required und Transform gemeinsam verwenden

Sie können required mit einer Transformation kombinieren, indem Sie das Optionsobjekt an input.required() übergeben.

value = input.required({
  transform: numberAttribute
});

Wann Sie welche Funktion verwenden sollten

Verwenden Sie required, um eine obligatorische Bindung zu erzwingen, und Transformationen, um eingehende Daten umzuwandeln oder zu normalisieren. So bleibt Ihre Komponentenlogik sauber und konsistent.

Schnelltest

Testen Sie Ihr Verständnis erforderlicher und transformierter Inputs.

Zusammenfassung

Verwenden Sie input.required() für obligatorische Inputs (nicht nullable, ohne Standardwert) und die Option transform, einschließlich booleanAttribute und numberAttribute, um Werte umzuwandeln. Beide Funktionen können kombiniert werden.

Häufig gestellte Fragen

Ist die Lektion „Erforderliche und transformierte Inputs“ kostenlos?

Ja — der vollständige Text von „Erforderliche und transformierte Inputs“ 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 „Erforderliche und transformierte Inputs“?

Markieren Sie Inputs als erforderlich und transformieren Sie Werte. 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 2 von 4.

Wie lange dauert die Lektion „Erforderliche und transformierte Inputs“?

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

← Zurück zu Angular Academy