Angular Academy · Lekcja

Computed i metody

Dodawać stan pochodny i metody aktualizujące

Computed i metody 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.

Poza surowym stanem

Użyteczny sklep udostępnia wartości pochodne i zachowanie. SignalStore dodaje je za pomocą withComputed dla modeli odczytu oraz withMethods dla akcji.

withComputed

withComputed otrzymuje bieżące sygnały sklepu i zwraca obiekt sygnałów computed(). Są one zapamiętywane i aktualizowane automatycznie, tak jak każdy sygnał computed.

import { signalStore, withState, withComputed } from '@ngrx/signals';
import { computed } from '@angular/core';

export const CartStore = signalStore(
  withState({ items: [] as Item[] }),
  withComputed(({ items }) => ({
    count: computed(() => items().length),
    total: computed(() => items().reduce((s, i) => s + i.price, 0))
  }))
);

Odczytywanie wartości computed

Elementy computed pojawiają się w sklepie tak samo jak stan. W szablonach należy odczytywać store.count() i store.total(); zostaną zaktualizowane, gdy zmieni się items.

template: 'Items: {{ store.count() }} — {{ store.total() }}'

withMethods

withMethods otrzymuje sklep i zwraca nazwane metody. W ich wnętrzu należy używać patchState do niezmiennej aktualizacji stanu.

import { withMethods, patchState } from '@ngrx/signals';

withMethods((store) => ({
  add(item: Item) {
    patchState(store, (s) => ({ items: [...s.items, item] }));
  },
  clear() {
    patchState(store, { items: [] });
  }
}))

Metody również odczytują stan

W metodzie można odczytywać bieżące sygnały z argumentu store, aby podjąć decyzję przed zastosowaniem zmian.

withMethods((store) => ({
  toggle(id: string) {
    const exists = store.items().some(i => i.id === id);
    if (!exists) return;
    patchState(store, (s) => ({
      items: s.items.map(i => i.id === id ? { ...i, on: !i.on } : i)
    }));
  }
}))

Metody mogą używać computed

Ponieważ withComputed jest wykonywane przed withMethods, metody mogą odczytywać elementy computed, które sklep już udostępnia.

withMethods((store) => ({
  checkout() {
    if (store.total() === 0) return;
    // proceed...
  }
}))

Wstrzykiwanie zależności

withMethods działa w kontekście wstrzykiwania, dlatego wewnątrz można wywołać inject(), aby pobrać usługi takie jak HttpClient lub router.

withMethods((store, http = inject(HttpClient)) => ({
  load() {
    http.get<Item[]>('/api/items')
      .subscribe(items => patchState(store, { items }));
  }
}))

Kolejność funkcji

Funkcje są komponowane od góry do dołu. Należy umieścić najpierw withState, następnie withComputed (odczytuje stan), a potem withMethods (odczytuje stan i computed). Odwrócenie kolejności powoduje błędy typów.

Hermetyzacja

Komponenty wywołują store.add(item) lub odczytują store.total(). Nigdy nie wywołują bezpośrednio patchState, dzięki czemu cała logika modyfikacji pozostaje wewnątrz sklepu.

Czyste computed, metody z efektami ubocznymi

Funkcje withComputed powinny być czyste i służyć wyłącznie do wyprowadzania wartości. Efekty uboczne, takie jak wywołania HTTP lub nawigacja, należy umieszczać w withMethods.

Testowanie metod

SignalStore to klasy możliwe do wstrzyknięcia. W testach należy udostępnić sklep przez TestBed, wywołać metodę, a następnie synchronicznie sprawdzić stan i sygnały computed.

const store = TestBed.inject(CartStore);
store.add({ id: '1', price: 10 });
expect(store.count()).toBe(1);
expect(store.total()).toBe(10);

Szybki test

Sprawdź swoją wiedzę o computed i metodach.

Podsumowanie

Rozbudowali Państwo SignalStore za pomocą withComputed dla zapamiętywanych modeli odczytu oraz withMethods dla hermetyzowanych akcji korzystających z patchState i wstrzykniętych usług. Kolejność funkcji gwarantuje, że każda warstwa może odczytywać warstwy znajdujące się przed nią.

Często zadawane pytania

Czy lekcja „Computed i metody” jest bezpłatna?

Tak — pełny tekst „Computed i metody” 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 „Computed i metody”?

Dodawać stan pochodny i metody aktualizujące Ć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 „Computed i metody”?

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