Verzweigen mit @switch
Wählen Sie Templates mit @switch und @case aus.
Verzweigen mit @switch ist eine kostenlose Angular Academy-Lektion auf CoddyKit. Dies ist Lektion 3 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.
Fallunterscheidungen mit switch
Der at-switch-Block wählt abhängig von einem Wert einen von mehreren Zweigen aus, ähnlich wie eine switch-Anweisung. Er wird zusammen mit at-case und at-default verwendet.
Grundlegende switch-Syntax
Schreiben Sie at-switch mit dem Ausdruck in runden Klammern und anschließend einen oder mehrere at-case-Blöcke, jeweils mit einem passenden Wert.
// @switch (status) {
// @case ('loading') { <p>Loading...</p> }
// @case ('error') { <p>Error!</p> }
// @default { <p>Ready</p> }
// }Der case-Block
Jeder at-case-Block nimmt einen Wert in runden Klammern entgegen. Gerendert wird der erste case-Block, dessen Wert strikt dem switch-Ausdruck entspricht.
Der default-Block
Der at-default-Block wird gerendert, wenn kein case-Block übereinstimmt. Er ist optional, wird aus Gründen der Vollständigkeit aber empfohlen.
Strikte Gleichheit
Der Abgleich verwendet strikte Gleichheit (===). Achten Sie darauf, dass die case-Werte denselben Typ wie der switch-Ausdruck haben.
Eine Fallunterscheidung mit einem Signal
Der switch-Ausdruck kann ein Signal-Aufruf sein. Dadurch wird die Ansicht aktualisiert, sobald sich das Signal ändert.
// @switch (state()) {
// @case ('on') { <p>On</p> }
// @case ('off') { <p>Off</p> }
// }ngSwitch ersetzen
Dies ersetzt die ältere Kombination aus den Direktiven ngSwitch, star-ngSwitchCase und star-ngSwitchDefault durch eine übersichtlichere Syntax ohne Import.
Nur ein Zweig wird gerendert
At-switch rendert genau einen passenden Zweig (oder den Default-Zweig). Die anderen Zweige sind überhaupt nicht im DOM vorhanden.
Enums und Konstanten
In case-Blöcken können Sie mit Enum-Mitgliedern oder Konstanten vergleichen, die auf der Komponente verfügbar gemacht wurden. Das verbessert Lesbarkeit und Typsicherheit.
Verschachtelung innerhalb von switch
Jeder case-Block kann beliebige Template-Inhalte enthalten, auch andere Blöcke für den Kontrollfluss wie at-if und at-for.
Wann switch verwendet wird
Bevorzugen Sie at-switch gegenüber einer langen at-if-/at-else-if-Kette, wenn Sie anhand eines einzelnen Werts zwischen mehreren festgelegten Fällen unterscheiden.
Schnelltest: switch
Der Fallback des switch-Blocks.
Zusammenfassung: Fallunterscheidungen
Sie haben den at-switch-Block mit at-case-Zweigen kennengelernt, die über strikte Gleichheit abgeglichen werden, sowie den optionalen at-default-Fallback. Er ersetzt ngSwitch und rendert genau einen Zweig. Als Nächstes geht es mit verzögertem Laden und at-defer weiter.
Häufig gestellte Fragen
Ist die Lektion „Verzweigen mit @switch“ kostenlos?
Ja — der vollständige Text von „Verzweigen mit @switch“ 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 „Verzweigen mit @switch“?
Wählen Sie Templates mit @switch und @case aus. 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 3 von 4.
Wie lange dauert die Lektion „Verzweigen mit @switch“?
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
- Bedingtes Rendering mit @if
- Schleifen mit @for
- Verzweigen mit @switch
- Verzögertes Laden mit @defer