Angular Academy · Pelajaran

Computed dan Method

Tambahkan state turunan dan method pembaruan.

Computed dan Method adalah pelajaran Angular Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Angular Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Angular Academy mencakup 4 pelajaran total.

Melampaui State Mentah

Store yang berguna menyediakan nilai turunan dan perilaku. SignalStore menambahkannya dengan withComputed untuk model baca dan withMethods untuk tindakan.

withComputed

withComputed menerima signal terkini dari store dan mengembalikan objek berisi signal computed(). Signal tersebut menyimpan hasil dan diperbarui otomatis seperti computed lainnya.

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

Membaca Computed

Anggota computed muncul pada store seperti state. Baca store.count() dan store.total() di template; keduanya diperbarui ketika items berubah.

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

withMethods

withMethods menerima store dan mengembalikan method bernama. Di dalamnya, gunakan patchState untuk memperbarui state secara imutabel.

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

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

Methods Juga Membaca State

Di dalam method, Anda dapat membaca signal terkini dari argumen store untuk mengambil keputusan sebelum menerapkan patch.

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

Methods Dapat Menggunakan computed

Karena withComputed dijalankan sebelum withMethods, methods dapat membaca anggota computed yang sudah disediakan oleh store.

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

Menginjeksi Dependensi

withMethods dijalankan dalam konteks injeksi, sehingga Anda dapat memanggil inject() di dalamnya untuk mengambil layanan seperti HttpClient atau router.

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

Urutan Fitur

Fitur disusun dari atas ke bawah. Letakkan withState terlebih dahulu, lalu withComputed (membaca state), kemudian withMethods (membaca state dan computed). Membalik urutan akan menyebabkan error tipe.

Enkapsulasi

Komponen memanggil store.add(item) atau membaca store.total(). Komponen tidak pernah memanggil patchState secara langsung, sehingga seluruh logika mutasi tetap berada di dalam store.

Computed Murni, Methods dengan Efek Samping

Jaga agar fungsi withComputed tetap murni (hanya menurunkan nilai). Tempatkan efek samping seperti panggilan HTTP atau navigasi di dalam withMethods.

Menguji Methods

SignalStore adalah class yang dapat diinjeksi. Dalam pengujian, sediakan store melalui TestBed, panggil sebuah method, lalu nyatakan hasil pada state dan signal computed secara sinkron.

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

Pemeriksaan Singkat

Periksa pemahaman Anda tentang computed dan methods.

Ringkasan

Anda telah memperkaya SignalStore dengan withComputed untuk model baca yang menyimpan hasil dan withMethods untuk tindakan terenkapsulasi yang menggunakan patchState dan layanan yang diinjeksi. Urutan fitur memastikan setiap lapisan dapat membaca lapisan yang berada sebelumnya.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Computed dan Method” gratis?

Ya — teks lengkap “Computed dan Method” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Angular Academy, upgrade ke CoddyKit PRO. Kursus Angular Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Computed dan Method”?

Tambahkan state turunan dan method pembaruan. Kamu berlatih Angular Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Angular Academy?

Tidak diperlukan pengalaman sebelumnya. Angular Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.

Berapa lama pelajaran “Computed dan Method” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Angular Academy ini?

Ya. Setiap pelajaran Angular Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Angular Academy