javascript / intermediate
Snippet
Template-Steuerungsfluss mit typsicheren Let-Deklarationen und Empty-Fallback
Angulars moderner integrierter Steuerungsfluss (@switch, @for, @let) arbeitet direkt mit Diskriminierten Union-Typen von TypeScript zusammen. Die @let-Deklaration erfasst den ausgewerteten Signalwert einmalig und ermöglicht Typpräzisierungen in den Verzweigungen. Der @for-Block bietet Identitätsverfolgung via 'track' sowie einen deklarativen @empty-Block für leere Listen.
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
28
29
30
31
32
33
34
35
import { Component, input } from '@angular/core';export type LoadingState<T> =| { status: 'idle' }| { status: 'loading' }| { status: 'success'; data: readonly T[] }| { status: 'error'; message: string };@Component({selector: 'app-item-list',standalone: true,template: `@let state = stateInput();@switch (state.status) {@case ('loading') {<div class="spinner">Loading records...</div>}@case ('success') {<ul>@for (item of state.data; track item.id; let idx = $index) {<li>{{ idx + 1 }}. {{ item.name }}</li>} @empty {<li class="empty-hint">No items found in dataset.</li>}</ul>}@case ('error') {<p class="error-text">{{ state.message }}</p>}}`})export class ItemListComponent {readonly stateInput = input.required<LoadingState<{ id: string; name: string }>>();}
angular
Erklärung
1
export type LoadingState<T> =
Definiert eine generische discriminated Union für die verschiedenen asynchronen Zustände eines Datenabrufs.
2
@let state = stateInput();
Speichert das Signal-Ergebnis in einer lokalen Template-Variable, um Mehrfachauswertungen zu vermeiden und Typprüfungen zu ermöglichen.
3
} @empty {
Rendert automatisch eine deklarative Fallback-Ansicht, wenn das iterierte Array leer ist, ohne zusätzliche Bedingungen.