Aktualizowanie sygnałów za pomocą set i update
Reaktywnie zmieniaj wartości sygnałów.
Aktualizowanie sygnałów za pomocą set i update to bezpłatna lekcja Angular Academy na CoddyKit. To lekcja 3 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.
Zmienianie sygnału
Zapisywalny sygnał można zmienić na dwa sposoby: za pomocą set(), aby zastąpić wartość, oraz update(), aby wyznaczyć nową wartość na podstawie bieżącej.
Korzystanie z set()
set(newValue) całkowicie zastępuje wartość sygnału przekazaną wartością.
const c = signal(0);
c.set(1);
console.log(c()); // 1Kiedy używać set()
Używaj set(), gdy nowa wartość nie zależy od poprzedniej, na przykład podczas przypisywania nowej wartości z danych wprowadzonych przez użytkownika lub z odpowiedzi API.
const name = signal('');
name.set('Alice');
console.log(name()); // AliceKorzystanie z update()
update(fn) przyjmuje funkcję, która otrzymuje bieżącą wartość i zwraca nową. To idealne rozwiązanie, gdy kolejna wartość zależy od poprzedniej.
const c = signal(0);
c.update(v => v + 1);
console.log(c()); // 1Zwiększanie wartości za pomocą update()
Klasyczny licznik korzysta z update(), aby zwiększać wartość na podstawie istniejącego licznika.
const count = signal(10);
count.update(v => v + 1); // 11
count.update(v => v - 1); // 10Niemutowalne aktualizowanie obiektów
Ponieważ wykrywanie zmian porównuje referencje, zastępuj obiekty zamiast je modyfikować. Rozpakuj starą wartość do nowego obiektu.
const point = signal({ x: 0, y: 0 });
point.update(p => ({ ...p, x: p.x + 1 }));
console.log(point()); // { x: 1, y: 0 }Niemutowalne aktualizowanie tablic
W przypadku tablic zwracaj nową tablicę. Unikaj używania push/splice na istniejącej tablicy; korzystaj z operatora spread lub metod tablicowych zwracających nowe tablice.
const items = signal<string[]>(['a']);
items.update(arr => [...arr, 'b']);
console.log(items()); // ['a', 'b']Podsumowanie set() a update()
set: znasz już końcową wartość. update: obliczasz końcową wartość na podstawie bieżącej. Obie metody powiadamiają odbiorców, jeśli wartość rzeczywiście się zmieni.
Równość referencji a zmiany
Sygnały domyślnie korzystają z równości referencji (lub równości wartości w przypadku typów prostych), aby określić, czy coś się zmieniło. Ustawienie sygnału na dokładnie tę samą wartość prostą nie powiadamia zależnych elementów.
const c = signal(5);
c.set(5); // no change, dependents not notifiedOdradzane mutowanie
Starsze API zawierało metodę mutate(), ale obecnie zalecane jest niemutowalne aktualizowanie za pomocą set() i update(), które zwracają nowe referencje.
Aktualizowanie sygnałów w metodach
W komponentach umieszczaj aktualizacje sygnałów w metodach, które szablon może wywoływać z obsługi zdarzeń.
export class CounterComponent {
count = signal(0);
increment() { this.count.update(v => v + 1); }
reset() { this.count.set(0); }
}Szybkie sprawdzenie: set a update
Wybierz odpowiednie narzędzie do danego zadania.
Podsumowanie: aktualizowanie Signals
Poznali Państwo set() do zastępowania wartości oraz update(fn) do wyprowadzania nowej wartości na podstawie bieżącej. Zobaczyli Państwo także, jak niemutowalnie aktualizować obiekty i tablice, aby równość referencji wykrywała zmianę. Dalej: bezpośrednie używanie signals w szablonach.
Ucz się HTML dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 38
- Lekcje
- 144
Często zadawane pytania
Czy lekcja „Aktualizowanie sygnałów za pomocą set i update” jest bezpłatna?
Tak — pełny tekst „Aktualizowanie sygnałów za pomocą set i update” 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 „Aktualizowanie sygnałów za pomocą set i update”?
Reaktywnie zmieniaj wartości sygnałów. Ć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 3 z 4.
Ile czasu zajmuje lekcja „Aktualizowanie sygnałów za pomocą set i update”?
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