0Pricing
Angular Academy · Lekcja

Dane wejściowe sygnałów za pomocą input()

Deklaruj reaktywne dane wejściowe jako sygnały.

Dane wejściowe sygnałów za pomocą input() to bezpłatna lekcja Angular Academy na CoddyKit. To lekcja 1 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.

Wejścia oparte na sygnałach

Nowoczesny Angular udostępnia funkcję input() do deklarowania wejść komponentu jako sygnałów, zastępując klasyczny dekorator @Input reaktywną alternatywą.

Deklarowanie wejścia będącego sygnałem

Wywołaj input() z opcjonalną wartością domyślną. Wynikiem jest sygnał tylko do odczytu.

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

@Component({ selector: "app-greet", template: "" })
export class GreetComponent {
  name = input("World");
}

Odczytywanie wejścia

Wejście będące sygnałem odczytuje się przez wywołanie go jak funkcji, zarówno w kodzie, jak i w szablonach.

@Component({
  selector: "app-greet",
  template: "<p>Hello, {{ name() }}</p>"
})
export class GreetComponent {
  name = input("World");
}

Powiązanie z komponentu nadrzędnego

Komponent nadrzędny wiąże się z wejściem będącym sygnałem dokładnie tak jak z klasycznym wejściem, za pomocą powiązania właściwości.

<app-greet [name]="userName"></app-greet>

// parent
userName = "Ada";

Wejścia są tylko do odczytu

Zwykłe input() jest tylko do odczytu wewnątrz komponentu. Nie można wywołać na nim set; jego wartość zmienia tylko komponent nadrzędny.

// this is NOT allowed:
// this.name.set("x");
// inputs are read-only signals

Określanie typów wejść

Podaj typ generyczny dla bezpieczeństwa typów, szczególnie gdy nie ma wartości domyślnej, na podstawie której można go wywnioskować.

age = input<number>();
label = input<string>("Untitled");

Wejścia w wartościach obliczanych

Ponieważ wejścia są sygnałami, można je łączyć z computed, aby tworzyć stan pochodny aktualizowany automatycznie.

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

first = input("");
last = input("");
fullName = computed(() => this.first() + " " + this.last());

Wejścia z effect

Na zmiany wejścia można reagować za pomocą effect, który uruchamia się ponownie za każdym razem, gdy zmieni się odczytywany sygnał.

constructor() {
  effect(() => {
    console.log("name is", this.name());
  });
}

Nie jest potrzebne ngOnChanges

W przypadku wejść będących sygnałami często nie trzeba już używać ngOnChanges; computed i effect automatycznie reagują na zmiany.

Aliasing wejścia

Za pomocą opcji alias można udostępnić inną publiczną nazwę powiązania.

value = input(0, { alias: "count" });

<!-- parent binds with the alias -->
<app-counter [count]="total"></app-counter>

Dlaczego warto używać wejść będących sygnałami

Wejścia będące sygnałami są reaktywne, bezpieczne typowo i łatwo łączą się z computed oraz effect, ograniczając ilość kodu w porównaniu z podejściem opartym na dekoratorach i cyklu życia.

Szybkie sprawdzenie

Sprawdź swoją wiedzę na temat wejść będących sygnałami.

Podsumowanie

Funkcja input() deklaruje reaktywne wejścia będące sygnałami tylko do odczytu. Odczytuj je przez wywołanie, określaj ich typ za pomocą generyków, w razie potrzeby nadaj im alias i łącz je z computed oraz effect zamiast z ngOnChanges.

Często zadawane pytania

Czy lekcja „Dane wejściowe sygnałów za pomocą input()” jest bezpłatna?

Tak — pełny tekst „Dane wejściowe sygnałów za pomocą input()” 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 „Dane wejściowe sygnałów za pomocą input()”?

Deklaruj reaktywne dane wejściowe jako sygnały. Ć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 1 z 4.

Ile czasu zajmuje lekcja „Dane wejściowe sygnałów za pomocą input()”?

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

  1. Dane wejściowe sygnałów za pomocą input()
  2. Wymagane i przekształcane dane wejściowe
  3. Wyjścia za pomocą output()
  4. Zapytania widoku za pomocą viewChild
← Powrót do Angular Academy