javascript / expert
Snippet
Headless-UI-Muster mit TemplateRef für entkoppeltes Rendering
Das Headless-UI-Muster entkoppelt die Business-Logik und Statusverwaltung von der visuellen Darstellung. Durch die Verwendung von @ContentChild zur Erfassung eines TemplateRef übernimmt die Komponente die Iteration und Kontextbereitstellung, während der Konsument die exakte HTML-Struktur und das Styling definiert.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@Component({selector: 'app-data-list',standalone: true,template: `@for (item of items(); track item.id) {<ng-container[ngTemplateOutlet]="itemTemplate"[ngTemplateOutletContext]="{ $implicit: item }"></ng-container>}`})export class DataListComponent<T extends { id: any }> {items = input.required<T[]>();@ContentChild(TemplateRef) itemTemplate!: TemplateRef<{ $implicit: T }>;}
angular
Erklärung
1
items = input.required<T[]>();
Verwendet die neue Signal-basierte Input-API für reaktive Datenverarbeitung.
2
@ContentChild(TemplateRef) itemTemplate!;
Erfasst das vom Benutzer bereitgestellte Template aus der Content-Projektion.
3
[ngTemplateOutletContext]="{ $implicit: item }"
Übergibt das Datenelement über die implizite Kontextvariable an das Template.