Czym są sygnały
Poznaj sygnały jako reaktywne kontenery stanu.
Czym są sygnały 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.
Czym są sygnały?
Sygnał to prymityw reaktywny wprowadzony we współczesnym Angularze. Jest opakowaniem wartości, które może powiadamiać zainteresowanych odbiorców o zmianie tej wartości.
Sygnały sprawiają, że reaktywność Angulara jest jawna, granularna i łatwa do zrozumienia.
Dlaczego reaktywność ma znaczenie
W interfejsie użytkownika ekran musi być zgodny z danymi. Gdy dane się zmieniają, widok powinien się aktualizować.
Sygnały dają Angularowi precyzyjny sposób określania tego, co dokładnie się zmieniło i od czego to zależy, dzięki czemu odświeżane są tylko zmienione części widoku.
Problem sprzed wprowadzenia sygnałów
Wcześniej Angular korzystał z Zone.js i szerokiego wykrywania zmian: po każdym zdarzeniu asynchronicznym Angular ponownie sprawdzał duże części drzewa komponentów.
To działa, ale może być nieefektywne. Sygnały umożliwiają granularne aktualizacje bez skanowania całego drzewa.
Sygnał przechowuje wartość
Potraktuj sygnał jak inteligentne pudełko zawierające wartość. Możesz odczytać jego zawartość i zastąpić ją inną wartością.
Odczyt sygnału rejestruje również, kto go odczytuje, dzięki czemu zależne elementy mogą zostać później zaktualizowane.
import { signal } from '@angular/core';
const count = signal(0);
// count is now a signal holding the number 0Odczyt jest wywołaniem funkcji
Najważniejsza zasada: aby odczytać sygnał, należy wywołać go jak funkcję. Nawiasy informują Angulara, że odczytywana jest bieżąca wartość.
const count = signal(0);
console.log(count()); // 0 <-- note the ()Sygnały działają synchronicznie
Odczyt sygnału jest synchroniczny i zawsze natychmiast zwraca bieżącą wartość. Nie ma tu subskrypcji, potoku async ani konieczności ręcznego zarządzania anulowaniem subskrypcji.
Sygnały zapisywalne a obliczane
Podstawowy sygnał utworzony za pomocą signal() jest zapisywalny: można zmieniać jego wartość.
Istnieją również sygnały obliczane (wartości pochodne) oraz efekty (efekty uboczne), które bazują na sygnałach zapisywalnych.
Sygnały śledzą zależności
Gdy wartość obliczana lub szablon odczytuje sygnał, Angular automatycznie rejestruje tę zależność.
Później, jeśli sygnał się zmieni, ponownie obliczane są tylko zależne od niego elementy. To właśnie zapewnia wydajność sygnałów.
Aktualizacje bez artefaktów
Sygnały projektuje się tak, aby były wolne od artefaktów: odbiorcy zawsze widzą spójną wartość i nie otrzymują powiadomień o pośrednim, częściowo zaktualizowanym stanie.
Dzięki temu złożone grafy reaktywne są przewidywalne.
Gdzie znajdują się sygnały
Sygnały są częścią @angular/core. Importuj stamtąd signal, computed i effect.
Można ich używać wewnątrz komponentów, usług lub w dowolnym kodzie TypeScript.
import { signal, computed, effect } from '@angular/core';Sygnały w komponencie
Typowym wzorcem jest deklarowanie sygnałów jako pól klasy w komponencie, a następnie odczytywanie ich w szablonie.
import { Component, signal } from '@angular/core';
@Component({ selector: 'app-counter', template: '' })
export class CounterComponent {
count = signal(0);
}Szybki test: podstawy sygnałów
Sprawdźmy, czy rozumiesz, czym jest sygnał.
Powtórzenie: czym są sygnały
Dowiedziałeś się, że sygnał to reaktywne opakowanie wartości, które powiadamia odbiorców o zmianie. Sygnał odczytuje się, wywołując go za pomocą nawiasów; odczyty są synchroniczne, a sygnały umożliwiają granularne aktualizacje wolne od artefaktów.
W następnym kroku utworzysz własne sygnały i odczytasz ich wartości.
Często zadawane pytania
Czy lekcja „Czym są sygnały” jest bezpłatna?
Tak — pełny tekst „Czym są sygnały” 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 „Czym są sygnały”?
Poznaj sygnały jako reaktywne kontenery stanu. Ć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 „Czym są sygnały”?
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
- Czym są sygnały
- Tworzenie i odczytywanie sygnałów
- Aktualizowanie sygnałów za pomocą set i update
- Sygnały w szablonach