Angular Academy · Pelajaran

Keadaan Terbitan dan Kaedah

Tambah keadaan terbitan dan kaedah kemas kini.

Pelajaran 2 daripada 413 langkah

Keadaan Terbitan dan Kaedah ialah pelajaran Angular Academy percuma di CoddyKit. Ini ialah pelajaran 2 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Angular Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Angular Academy merangkumi sejumlah 4 pelajaran.

Melangkaui Keadaan Mentah

Gedung yang berguna mendedahkan nilai terbitan dan tingkah laku. SignalStore menambahkannya dengan withComputed untuk model bacaan dan withMethods untuk tindakan.

withComputed

withComputed menerima isyarat semasa gedung dan mengembalikan objek isyarat computed(). Isyarat ini memo dan dikemas kini secara automatik seperti sebarang nilai terkomput.

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 Nilai Terkomput

Ahli terkomput muncul pada gedung seperti keadaan. Baca store.count() dan store.total() dalam templat; kedua-duanya dikemas kini apabila items berubah.

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

withMethods

withMethods menerima gedung dan mengembalikan kaedah bernama. Di dalamnya, gunakan patchState untuk mengemas kini keadaan secara tidak boleh ubah.

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

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

Kaedah Juga Membaca Keadaan

Di dalam kaedah, anda boleh membaca isyarat semasa daripada argumen gedung untuk membuat keputusan sebelum menggunakan tampalan.

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

Kaedah Boleh Menggunakan computed

Oleh sebab withComputed dijalankan sebelum withMethods, kaedah boleh membaca ahli terkomput yang telah didedahkan oleh gedung.

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

Menyuntik Kebergantungan

withMethods dijalankan dalam konteks suntikan, jadi panggil inject() di dalamnya untuk mendapatkan perkhidmatan seperti HttpClient atau penghala.

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

Susunan Ciri

Ciri digubah dari atas ke bawah. Letakkan withState dahulu, kemudian withComputed (membaca keadaan), dan seterusnya withMethods (membaca keadaan serta nilai terkomput). Menyongsangkan susunan akan menyebabkan ralat jenis.

Pengkapsulan

Komponen memanggil store.add(item) atau membaca store.total(). Komponen tidak pernah memanggil patchState secara terus, lalu semua logik mutasi kekal di dalam gedung.

Nilai Terkomput Tulen, Kaedah Berkesan

Pastikan fungsi withComputed tulen (hanya membuat terbitan). Letakkan kesan sampingan seperti panggilan HTTP atau navigasi di dalam withMethods.

Menguji Kaedah

SignalStore ialah kelas yang boleh disuntik. Dalam ujian, sediakan gedung melalui TestBed, panggil suatu kaedah, kemudian tegaskan keadaan dan isyarat terkomput secara segerak.

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

Semakan Pantas

Semak pemahaman anda tentang nilai terkomput dan kaedah.

Jawab dalam pelajaran interaktif

Imbas Kembali

Anda telah memperkaya SignalStore dengan withComputed untuk model bacaan bermemo dan withMethods untuk tindakan terkapsul yang menggunakan patchState serta perkhidmatan yang disuntik. Susunan ciri memastikan setiap lapisan boleh membaca lapisan sebelumnya.

Percuma untuk bermula

Pelajari HTML dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 38
Pelajaran: 144

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Keadaan Terbitan dan Kaedah” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Angular Academy, termasuk “Keadaan Terbitan dan Kaedah”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Angular Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Keadaan Terbitan dan Kaedah”?

Tambah keadaan terbitan dan kaedah kemas kini. Anda berlatih Angular Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Angular Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Angular Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 2 daripada 4.

Berapa lamakah pelajaran “Keadaan Terbitan dan Kaedah” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Angular Academy ini?

Ya. Setiap pelajaran Angular Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

← Kembali ke Angular Academy