javascript / intermediate
Snippet
Auswertung komplexer Verzweigungen mit integriertem Switch-Control-Flow
Die native Control-Flow-Syntax von Angular bietet deklarative, typsichere Verzweigungsblöcke direkt in Komponenten-Templates. Der @switch-Block wertet Ausdrücke aus und rendert den passenden @case-Block ohne den Laufzeit-Overhead früherer struktureller Direktiven wie *ngSwitchCase.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import { Component, input } from '@angular/core';export type UserStatus = 'pending' | 'active' | 'suspended' | 'archived';@Component({selector: 'app-status-badge',standalone: true,template: `@switch (status()) {@case ('active') {<span class="badge badge-success">Account Active</span>}@case ('pending') {<span class="badge badge-warning">Verification Required</span>}@case ('suspended') {<span class="badge badge-danger">Account Locked</span>}@default {<span class="badge badge-neutral">Status Unknown</span>}}`})export class StatusBadgeComponent {readonly status = input.required<UserStatus>();}
angular
Erklärung
1
readonly status = input.required<UserStatus>();
Definiert einen stark typisierten, erforderlichen Signal-Input für den UserStatus-Union-Typ.
2
@switch (status()) {
Leitet die integrierte Template-Verzweigung ein, indem der aktuelle Wert des Status-Signals ausgewertet wird.
3
@case ('active') { <span class="badge badge-success">Account Active</span> }
Rendert die DOM-Elemente für den Status 'active', sobald der ausgewertete Ausdruck übereinstimmt.
4
@default { <span class="badge badge-neutral">Status Unknown</span> }
Definiert einen Standard-Block, der greift, falls keine der vorherigen Fallunterscheidungen zutrifft.