Angular Academy · Pelajaran

linkedSignal dan Corak Lanjutan

Selaraskan isyarat bersandar secara reaktif.

Pelajaran 4 daripada 413 langkah

linkedSignal dan Corak Lanjutan ialah pelajaran Angular Academy percuma di CoddyKit. Ini ialah pelajaran 4 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.

Masalah yang Diselesaikan oleh linkedSignal

Kadangkala anda mahukan keadaan boleh tulis yang turut ditetapkan semula apabila sumber tertentu berubah. computed biasa adalah baca sahaja; isyarat biasa tidak ditetapkan semula secara automatik. linkedSignal() merapatkan jurang ini: keadaan boleh tulis yang diterbitkan daripada sumber.

linkedSignal Asas

Hantar pengiraan. Hasilnya ialah isyarat boleh tulis yang dikira semula apabila sumbernya berubah, tetapi masih boleh ditetapkan secara manual.

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

const options = signal(['a', 'b', 'c']);
const selected = linkedSignal(() => options()[0]);

selected.set('b');        // manual override
options.set(['x', 'y']);  // resets to 'x'

Mengapa Tidak Menggunakan Isyarat Sahaja?

Isyarat biasa yang dimulakan sekali akan mengekalkan nilai lapuk selepas sumber berubah. linkedSignal menerbitkan semula nilai setiap kali sumber berubah sambil masih membenarkan penulisan di antaranya.

// Plain signal: stale after options change
// const selected = signal(options()[0]);

// linkedSignal: auto-resets when options changes
const selected = linkedSignal(() => options()[0]);

Bentuk source/computation

Bentuk lanjutan memisahkan source daripada computation, serta menyediakan akses kepada nilai sebelumnya — berguna untuk mengekalkan pilihan jika pilihan itu masih wujud.

const items = signal([{ id: 1 }, { id: 2 }]);

const chosen = linkedSignal({
  source: items,
  computation: (newItems, previous) => {
    const prev = previous?.value;
    const stillThere = newItems.find(i => i.id === prev?.id);
    return stillThere ?? newItems[0];
  }
});

Mengekalkan Pilihan Pengguna

Corak nilai sebelumnya mengekalkan pilihan pengguna jika pilihan itu masih wujud selepas senarai dikemas kini; jika tidak, corak ini kembali kepada nilai lalai — sentuhan UX yang sangat baik.

linkedSignal Boleh Ditulis

Berbeza daripada computed, anda boleh memanggil .set() dan .update() pada linkedSignal. Nilai manual dikekalkan sehingga sumber berubah lagi.

const base = signal(10);
const editable = linkedSignal(() => base());

editable.update(v => v + 5); // 15
base.set(100);               // resets to 100

Corak: Senarai Pilihan Bergantung

Negara -> Bandar: apabila negara berubah, tetapkan semula bandar kepada pilihan pertama yang tersedia, tetapi benarkan pengguna memilih pilihan lain.

const country = signal('TR');
const cities = computed(() => citiesFor(country()));
const city = linkedSignal(() => cities()[0]);

country.set('US'); // city resets to first US city

Corak: Keadaan UI Optimistik

linkedSignal boleh menyimpan nilai optimistik yang diterbitkan daripada data pelayan, sambil membenarkan UI mengatasinya serta-merta dan menyegerakkannya semula apabila data baharu tiba.

Menggabungkan dengan Kesan

Anda boleh bertindak balas terhadap perubahan linkedSignal dengan kesan, contohnya untuk mengekalkan pilihan semasa.

const selected = linkedSignal(() => options()[0]);

effect(() => {
  localStorage.setItem('selected', selected());
});

Bila TIDAK Menggunakan linkedSignal

Jika nilai terbitan hanya boleh dibaca, gunakan computed(). Jika nilai itu tidak perlu ditetapkan semula daripada sumber, gunakan signal() biasa. Gunakan linkedSignal hanya apabila anda memerlukan kedua-duanya: boleh tulis dan boleh ditetapkan semula daripada sumber.

Graf Reaktif Lanjutan

signal -> computed -> linkedSignal -> effect membentuk saluran reaktif yang lengkap: input mentah, nilai terbitan tulen, keadaan boleh tulis yang boleh ditetapkan semula dan kesan sampingan — semuanya tanpa langganan manual.

Semakan Pantas

Uji pemahaman anda tentang linkedSignal.

Jawab dalam pelajaran interaktif

Imbas Kembali: linkedSignal dan Corak Lanjutan

linkedSignal() memberikan keadaan boleh tulis yang ditetapkan semula daripada sumber.

Gunakan bentuk sumber/pengiraan untuk mengekalkan pilihan pengguna.
Sangat sesuai untuk menu lungsur bergantung dan UI optimistik.
Gunakan computed untuk bacaan sahaja, dan isyarat biasa untuk keadaan yang tidak ditetapkan semula.

Anda telah melengkapkan kursus Signals.

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 “linkedSignal dan Corak Lanjutan” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Angular Academy, termasuk “linkedSignal dan Corak Lanjutan”, 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 “linkedSignal dan Corak Lanjutan”?

Selaraskan isyarat bersandar secara reaktif. 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 4 daripada 4.

Berapa lamakah pelajaran “linkedSignal dan Corak Lanjutan” 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