Angular Academy · Lektion

Obligatoriska och transformerade inputs

Markera inputs som obligatoriska och transformera värden.

Lektion 2 av 413 steg

Obligatoriska och transformerade inputs är en gratis lektion i Angular Academy på CoddyKit. Detta är lektion 2 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Angular Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Angular Academy innehåller totalt 4 lektioner.

Bortom grundläggande indata

Signalindata har två kraftfulla funktioner: att markera indata som obligatorisk och att transformera inkommande värden innan de lagras.

Obligatorisk indata

Använd input.required() när föräldern alltid måste ange ett värde. Det finns inget standardvärde.

import { input } from "@angular/core";

export class UserComponent {
  userId = input.required<string>();
}

Varför obligatorisk indata är viktigt

Om obligatorisk indata inte binds rapporterar Angular ett fel. På så sätt upptäcks misstag tidigt i stället för att ett odefinierat värde slinker igenom.

<!-- error: userId is required -->
<app-user></app-user>

<!-- correct -->
<app-user [userId]="id"></app-user>

Obligatorisk indata är icke-nullbar

Eftersom obligatorisk indata måste anges är dess typ aldrig undefined. Därför kan du läsa den säkert utan nullkontroller.

userId = input.required<string>();
load() {
  return this.api.get(this.userId()); // always a string
}

Transformera indata

Alternativet transform kör en funktion på det inkommande värdet innan det lagras, vilket är användbart för typomvandling.

import { input } from "@angular/core";

export class ToggleComponent {
  disabled = input(false, { transform: (v: unknown) => !!v });
}

Boolesk typomvandling

Angular tillhandahåller booleanAttribute för att omvandla attributliknande värden till riktiga booleska värden, vilket är praktiskt för attribut som styrs av sin närvaro.

import { input, booleanAttribute } from "@angular/core";

disabled = input(false, { transform: booleanAttribute });

<!-- both work -->
<app-btn disabled></app-btn>
<app-btn [disabled]="true"></app-btn>

Numerisk typomvandling

På liknande sätt omvandlar numberAttribute ett strängattribut till ett tal.

import { input, numberAttribute } from "@angular/core";

count = input(0, { transform: numberAttribute });

<!-- string "5" becomes number 5 -->
<app-counter count="5"></app-counter>

Egna transformationsfunktioner

Du kan skriva valfri transformation för att normalisera värden, till exempel genom att ta bort inledande och avslutande blanksteg i strängar.

label = input("", {
  transform: (v: string) => v.trim()
});

Typer för transformeringens indata och utdata

En transformation kan ta emot en typ och lagra en annan. Den accepterade typen är den som föräldrar binder till, medan den lagrade typen är den du läser.

// accepts string | number, stores number
size = input(0, {
  transform: (v: string | number) => Number(v)
});

Obligatorisk indata och transformation tillsammans

Du kan kombinera obligatorisk indata med en transformation genom att skicka ett optionsobjekt till input.required().

value = input.required({
  transform: numberAttribute
});

När ska respektive funktion användas?

Använd obligatorisk indata för att kräva en bindning och transformationer för att omvandla eller normalisera inkommande data. Då förblir komponentlogiken ren och konsekvent.

Snabbkontroll

Testa din förståelse av obligatorisk och transformerad indata.

Besvara frågan i den interaktiva lektionen

Sammanfattning

Använd input.required() för obligatorisk indata (icke-nullbar och utan standardvärde) och alternativet transform, inklusive booleanAttribute och numberAttribute, för att omvandla värden. De kan kombineras.

Gratis att börja

Lär dig HTML med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 38
Lektioner: 144

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Obligatoriska och transformerade inputs” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Angular Academy, inklusive ”Obligatoriska och transformerade inputs”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Angular Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Obligatoriska och transformerade inputs”?

Markera inputs som obligatoriska och transformera värden. Ni övar på Angular Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Angular Academy?

Du behöver inga förkunskaper. Utbildningen i Angular Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 4.

Hur lång tid tar lektionen ”Obligatoriska och transformerade inputs”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Angular Academy-lektionen?

Ja. Varje Angular Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till Angular Academy