Angular Academy · Lekcja

Wymagane i przekształcane dane wejściowe

Oznaczaj dane wejściowe jako wymagane i przekształcaj ich wartości.

Wymagane i przekształcane dane wejściowe to bezpłatna lekcja Angular Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Angular Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Angular Academy zawiera 4 lekcji w sumie.

Więcej niż podstawowe wejścia

Wejścia będące sygnałami obsługują dwie zaawansowane funkcje: oznaczanie wejścia jako wymaganego oraz przekształcanie wartości wejściowych przed ich zapisaniem.

Wymagane wejścia

Użyj input.required(), gdy komponent nadrzędny musi zawsze dostarczyć wartość. Nie ma wtedy wartości domyślnej.

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

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

Dlaczego wymagane wejścia są ważne

Jeśli wymagane wejście nie jest powiązane, Angular zgłasza błąd, wcześnie wykrywając pomyłki zamiast dopuszczać do użycia wartości undefined.

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

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

Wymagane wejścia nie są nullowalne

Ponieważ wymagane wejście musi zostać dostarczone, jego typ nigdy nie ma wartości undefined, więc można je bezpiecznie odczytywać bez sprawdzania wartości null.

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

Przekształcanie wejść

Opcja transform uruchamia funkcję na wartości wejściowej przed jej zapisaniem, co jest przydatne między innymi do konwersji typów.

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

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

Konwersja wartości logicznych

Angular udostępnia funkcję booleanAttribute, która konwertuje wartości w stylu atrybutów na rzeczywiste wartości logiczne. Jest to przydatne w przypadku atrybutów określanych samą obecnością.

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

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

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

Konwersja liczb

Podobnie numberAttribute konwertuje atrybut będący ciągiem znaków na liczbę.

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

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

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

Niestandardowe funkcje przekształcające

Można napisać dowolną funkcję przekształcającą do normalizowania wartości, na przykład usuwającą białe znaki z początku i końca ciągów.

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

Typy wejściowe i wyjściowe funkcji przekształcającej

Funkcja przekształcająca może przyjmować jeden typ, a zapisywać inny. Typ akceptowany określa, co wiążą komponenty nadrzędne, a typ zapisany — co można odczytać.

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

Jednoczesne wymaganie i przekształcanie

Można połączyć wymaganie z przekształcaniem, przekazując obiekt opcji do input.required().

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

Kiedy używać poszczególnych funkcji

Używaj wymaganych wejść do wymuszania obowiązkowych powiązań, a funkcji przekształcających do konwersji lub normalizowania danych wejściowych. Dzięki temu logika komponentu pozostaje przejrzysta i spójna.

Szybkie sprawdzenie

Sprawdź swoją wiedzę na temat wymaganych i przekształcanych wejść.

Podsumowanie

Używaj input.required() dla obowiązkowych wejść (nienullowalnych i bez wartości domyślnej), a opcji transform, w tym booleanAttribute i numberAttribute, do konwersji wartości. Obie funkcje można łączyć.

Często zadawane pytania

Czy lekcja „Wymagane i przekształcane dane wejściowe” jest bezpłatna?

Tak — pełny tekst „Wymagane i przekształcane dane wejściowe” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Angular Academy, przejdź na CoddyKit PRO. Kurs Angular Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Wymagane i przekształcane dane wejściowe”?

Oznaczaj dane wejściowe jako wymagane i przekształcaj ich wartości. Ćwiczysz Angular Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Angular Academy?

Nie wymagamy żadnego doświadczenia. Angular Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.

Ile czasu zajmuje lekcja „Wymagane i przekształcane dane wejściowe”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Angular Academy?

Tak. Każda lekcja Angular Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

Dane wejściowe sygnałów za pomocą input()
Wymagane i przekształcane dane wejściowe
Wyjścia za pomocą output()
Zapytania widoku za pomocą viewChild

← Powrót do Angular Academy