Angular Academy · Lezione

Computed e metodi

Aggiungere stato derivato e metodi di aggiornamento

Computed e metodi è una lezione Angular Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Angular Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Angular Academy include 4 lezioni in totale.

Oltre lo stato grezzo

Uno store utile espone valori derivati e comportamento. SignalStore aggiunge questi elementi con withComputed per i modelli di lettura e withMethods per le azioni.

withComputed

withComputed riceve i signal correnti dello store e restituisce un oggetto di signal computed(). Questi signal memorizzano il risultato e si aggiornano automaticamente come qualsiasi 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))
  }))
);

Leggere i computed

I membri computed appaiono nello store proprio come lo stato. Legga store.count() e store.total() nei template: si aggiornano quando cambia items.

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

withMethods

withMethods riceve lo store e restituisce metodi denominati. Al loro interno, usi patchState per aggiornare lo stato in modo immutabile.

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

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

Anche i metodi leggono lo stato

All’interno di un metodo può leggere i signal correnti dall’argomento store per prendere decisioni prima di applicare la modifica.

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)
    }));
  }
}))

I metodi possono usare computed

Poiché withComputed viene eseguito prima di withMethods, i metodi possono leggere i membri computed già esposti dallo store.

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

Iniettare le dipendenze

withMethods viene eseguito in un contesto di iniezione, quindi può chiamare inject() al suo interno per ottenere servizi come HttpClient o un router.

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

Ordine delle feature

Le feature vengono composte dall’alto verso il basso. Inserisca prima withState, poi withComputed (che legge lo stato) e infine withMethods (che legge lo stato e i computed). Invertire l’ordine causa errori di tipo.

Incapsulamento

I componenti chiamano store.add(item) oppure leggono store.total(). Non chiamano mai direttamente patchState, mantenendo tutta la logica di modifica all’interno dello store.

Computed puri, metodi con effetti collaterali

Mantenga pure le funzioni di withComputed, limitandole alle sole derivazioni. Inserisca gli effetti collaterali, come chiamate HTTP o navigazione, all’interno di withMethods.

Testare i metodi

I SignalStore sono classi iniettabili. Nei test, fornisca lo store tramite TestBed, chiami un metodo e verifichi quindi lo stato e i signal computed in modo sincrono.

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

Verifica rapida

Verifichi la sua comprensione di computed e metodi.

Riepilogo

Ha arricchito un SignalStore con withComputed per modelli di lettura memorizzati e con withMethods per azioni incapsulate che usano patchState e servizi iniettati. L’ordine delle feature garantisce che ogni livello possa leggere quelli precedenti.

Domande Frequenti

La lezione «Computed e metodi» è gratuita?

Sì — il testo completo di «Computed e metodi» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Angular Academy, passa a CoddyKit PRO. Il corso Angular Academy include 4 lezioni in totale.

Cosa imparerò in «Computed e metodi»?

Aggiungere stato derivato e metodi di aggiornamento Eserciti Angular Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Angular Academy?

Non è richiesta alcuna esperienza precedente. Angular Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.

Quanto tempo richiede la lezione «Computed e metodi»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Angular Academy?

Sì. Ogni lezione Angular Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a Angular Academy