Snippet

Komponenten-Inputs eingrenzen mit erforderlichen Signal-Inputs und Transform-Funktionen

`input.required<Severity, string>({ transform: toSeverity })` deklariert zwei unterschiedliche Typen für denselben Input: `string` ist das, was ein Template-Autor binden darf (`[severity]="someString"`), während `Severity` das ist, was der Komponentenkörper über `severity()` zurückliest. Die `transform`-Funktion läuft synchron zum Bindungszeitpunkt und ist die einzige Brücke zwischen beiden — der Compiler erzwingt, dass der Parametertyp der Transform-Funktion zum Schreibtyp passt und ihr Rückgabetyp zum Lesetyp, sodass eine unpassende Transform-Funktion einen Kompilierfehler auslöst, statt einen unvalidierten String stillschweigend durchzulassen. Weil der Input `required` ist, verweigert TypeScript zudem das Kompilieren jedes Templates, das `AlertBannerComponent` instanziiert, ohne `severity` zu binden.

snippet.js

javascript

import { Component, input } from '@angular/core';
 
type Severity = 'low' | 'medium' | 'high';
 
function toSeverity(value: string): Severity {
  const normalized = value.toLowerCase();
  if (normalized === 'low' || normalized === 'medium' || normalized === 'high') {
    return normalized;
  }
  throw new Error(`Invalid severity value: "${value}"`);
}
 
@Component({
  selector: 'app-alert-banner',
  standalone: true,
  template: `<div [class]="'banner-' + severity()">{{ message() }}</div>`,
})
export class AlertBannerComponent {
  severity = input.required<Severity, string>({ transform: toSeverity });
  message = input.required<string>();
}

angular

Erklärung

type Severity = 'low' | 'medium' | 'high';

Der enge Lese-Typ — die einzigen drei Werte, die `severity()` innerhalb der Komponente nach Ausführung der Transform-Funktion je liefern kann.

function toSeverity(value: string): Severity

Die Transform-Funktion selbst; ihr Parametertyp muss zum Schreibtyp des Inputs passen und ihr Rückgabetyp zum Lesetyp, sonst weist der Compiler den Aufruf von `input.required` zurück.

throw new Error(`Invalid severity value: "${value}"`);

Da Transform-Funktionen synchron während der Änderungserkennung laufen, wird eine ungültige Bindung sofort als geworfener Fehler sichtbar, statt still zu einem nicht eingegrenzten String zu werden.

severity = input.required<Severity, string>({ transform: toSeverity });

Die beiden generischen Parameter trennen Lese- von Schreibtyp; ohne `required` wäre `severity()` selbst nach erfolgreicher Transformation möglicherweise `undefined`.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Experten →

Komponenten-Inputs eingrenzen mit erforderlichen Signal-Inputs und Transform-Funktionen

Verwandt