Angular Academy · Lekcja

Sygnały obliczane

Wyprowadzaj wartości aktualizowane automatycznie.

Sygnały obliczane 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 jest sygnał obliczany

Sygnał computed() wyprowadza wartość z co najmniej jednego innego sygnału. Gdy sygnał źródłowy się zmieni, wartość obliczana jest przeliczana leniwie — tylko wtedy, gdy coś ją odczyta.

Sygnały obliczane są tylko do odczytu: nie można wywołać na nich .set().

Tworzenie sygnału obliczanego

Przekazujesz funkcję do computed(). Angular automatycznie śledzi każdy sygnał odczytywany w jej wnętrzu.

import { signal, computed } from '@angular/core';

const price = signal(100);
const quantity = signal(2);

const total = computed(() => price() * quantity());

console.log(total()); // 200

Automatyczne śledzenie zależności

Nigdy nie deklarujesz zależności ręcznie. Odczytanie price() i quantity() wewnątrz funkcji zwrotnej automatycznie rejestruje je jako zależności.

Jeśli sygnał jest odczytywany warunkowo, ale dana gałąź nie zostanie wykonana, nie będzie śledzony w tym przebiegu.

const showTax = signal(false);
const tax = signal(20);
const base = signal(100);

const final = computed(() =>
  showTax() ? base() + tax() : base()
);
// When showTax() is false, "tax" is NOT a dependency

Leniwość i zapamiętywanie wyników

Sygnał obliczany uruchamia się dopiero podczas odczytu i zapamiętuje wynik. Jeśli odczytasz go dwa razy bez zmian sygnałów źródłowych, funkcja wykona się tylko raz.

const a = signal(1);
const doubled = computed(() => {
  console.log('recompute');
  return a() * 2;
});

doubled(); // logs "recompute", returns 2
doubled(); // cached, returns 2, no log

Łączenie sygnałów obliczanych

Sygnały obliczane mogą zależeć od innych sygnałów obliczanych, tworząc reaktywny graf.

const firstName = signal('Ada');
const lastName = signal('Lovelace');

const fullName = computed(() => firstName() + ' ' + lastName());
const greeting = computed(() => 'Hello, ' + fullName());

console.log(greeting()); // Hello, Ada Lovelace

Używanie computed w komponencie

Sygnały obliczane świetnie sprawdzają się w komponentach. Szablon jest renderowany ponownie tylko wtedy, gdy obliczona wartość rzeczywiście się zmieni.

import { Component, signal, computed } from '@angular/core';

@Component({
  selector: 'app-cart',
  template: '<p>Total: {{ total() }}</p>'
})
export class CartComponent {
  items = signal([10, 20, 30]);
  total = computed(() => this.items().reduce((a, b) => a + b, 0));
}

Sygnały obliczane są tylko do odczytu

Próba ustawienia sygnału obliczanego jest błędem podczas kompilacji. Sygnały te służą wyłącznie do wyrażania stanu pochodnego.

const count = signal(0);
const doubled = computed(() => count() * 2);

// doubled.set(10); // ERROR: Property 'set' does not exist
count.set(5);       // OK - update the source instead
console.log(doubled()); // 10

Równość i pomijanie ponownych obliczeń

Domyślnie sygnał obliczany używa Object.is do porównywania wartości. Jeśli nowa wartość obliczana jest równa poprzedniej, zależne od niej elementy nie są powiadamiane, co pozwala uniknąć zbędnej pracy.

const value = signal(2);
const isEven = computed(() => value() % 2 === 0);

// value 2 -> 4 -> 6 all yield isEven() === true
// Dependents of isEven do NOT re-run on those changes

Niestandardowa funkcja porównująca

Możesz przekazać opcję equal, aby określić, kiedy sygnał obliczany uznaje się za zmieniony — jest to przydatne w przypadku obiektów i tablic.

const data = signal({ id: 1, name: 'A' });

const view = computed(
  () => data(),
  { equal: (a, b) => a.id === b.id }
);
// Dependents re-run only when the id changes

Unikanie efektów ubocznych w computed

Sygnał obliczany musi być czysty: bez wywołań HTTP, logowania jako działania i modyfikowania innych sygnałów. Efekty uboczne należą do effect(). Zachowanie czystości sygnałów obliczanych sprawia, że reaktywny graf jest przewidywalny.

Sygnały obliczane a metody

Metoda użyta w szablonie uruchamia się przy każdym cyklu wykrywania zmian. Sygnał obliczany uruchamia się tylko po zmianie zależności i zapamiętuje wynik — jest znacznie wydajniejszy dla wartości pochodnych.

// Method: recalculates every CD cycle
getTotal() { return this.items().reduce((a, b) => a + b, 0); }

// Computed: memoized, runs only on item change
total = computed(() => this.items().reduce((a, b) => a + b, 0));

Szybki sprawdzian

Sprawdź swoją wiedzę na temat sygnałów obliczanych.

Podsumowanie: sygnały obliczane

Dowiedziałeś się, że computed() tworzy sygnały pochodne tylko do odczytu z automatycznym śledzeniem zależności, leniwym obliczaniem i zapamiętywaniem wyników.

Zachowuj ich czystość — bez efektów ubocznych.
Mogą zależeć od innych sygnałów obliczanych.
Użyj equal do niestandardowego wykrywania zmian.

Następnie: wykonywanie efektów ubocznych za pomocą effect().

Często zadawane pytania

Czy lekcja „Sygnały obliczane” jest bezpłatna?

Tak — pełny tekst „Sygnały obliczane” 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 „Sygnały obliczane”?

Wyprowadzaj wartości aktualizowane automatycznie. Ć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 „Sygnały obliczane”?

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

← Powrót do Angular Academy