Angular Academy · Pelajaran

linkedSignal dan Pola Lanjutan

Koordinasikan sinyal yang saling bergantung secara reaktif.

Pelajaran 4 dari 413 langkah

linkedSignal dan Pola Lanjutan adalah pelajaran Angular Academy gratis di CoddyKit. Ini adalah pelajaran 4 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.

Masalah yang Diatasi linkedSignal

Terkadang Anda menginginkan state yang dapat ditulis dan juga direset ketika sumber tertentu berubah. Computed biasa hanya dapat dibaca; sinyal biasa tidak direset secara otomatis. linkedSignal() menjembatani keduanya: state yang dapat ditulis dan diturunkan dari sumber.

linkedSignal Dasar

Berikan sebuah perhitungan. Hasilnya adalah sinyal yang dapat ditulis, yang dihitung ulang ketika sumbernya berubah, tetapi juga dapat 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 Sinyal Biasa?

Sinyal biasa yang diinisialisasi sekali akan mempertahankan nilai lama setelah sumber berubah. linkedSignal menurunkan ulang nilainya setiap kali sumber berubah, sekaligus tetap memungkinkan 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 dari computation, serta memberikan akses ke nilai sebelumnya — berguna untuk mempertahankan pilihan jika pilihan tersebut masih ada.

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

Mempertahankan Pilihan Pengguna

Pola nilai sebelumnya mempertahankan pilihan pengguna jika pilihan itu masih ada setelah daftar diperbarui; jika tidak, pola ini menggunakan nilai default — sentuhan UX yang sangat baik.

linkedSignal Dapat Ditulis

Berbeda dari computed, Anda dapat memanggil .set() dan .update() pada linkedSignal. Nilai manual tersebut bertahan hingga sumber berubah lagi.

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

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

Pola: Daftar Pilihan Bergantung

Negara -> Kota: ketika negara berubah, reset kota ke kota pertama yang tersedia, tetapi izinkan pengguna memilih kota lain.

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

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

Pola: State UI Optimistis

linkedSignal dapat menyimpan nilai optimistis yang diturunkan dari data server, sekaligus memungkinkan UI menggantinya segera dan menyinkronkannya kembali ketika data terbaru tiba.

Menggabungkan dengan Effect

Anda dapat merespons perubahan linkedSignal dengan effect, misalnya untuk menyimpan pilihan saat ini.

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

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

Kapan TIDAK Menggunakan linkedSignal

Jika nilai turunan hanya dapat dibaca, gunakan computed(). Jika nilai tersebut tidak pernah perlu direset dari sebuah sumber, gunakan signal() biasa. Gunakan linkedSignal hanya ketika Anda memerlukan keduanya: dapat ditulis dan dapat direset dari sumber.

Grafik Reaktif Lanjutan

signal -> computed -> linkedSignal -> effect membentuk pipeline reaktif lengkap: input mentah, derivasi murni, state yang dapat ditulis dan direset, serta efek samping — semuanya tanpa subscription manual.

Pemeriksaan Singkat

Uji pemahaman Anda tentang linkedSignal.

Jawab di pelajaran interaktif

Ringkasan: linkedSignal & Pola Lanjutan

linkedSignal() memberi Anda state yang dapat ditulis dan direset dari suatu sumber.

Gunakan bentuk sumber/perhitungan untuk mempertahankan pilihan pengguna.
Sangat cocok untuk menu tarik-turun yang saling bergantung dan UI optimistis.
Gunakan computed untuk nilai yang hanya dapat dibaca, dan signal biasa untuk state yang tidak direset.

Anda telah menyelesaikan kursus Signals.

Gratis untuk memulai

Belajar HTML dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus: 38
Pelajaran: 144

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “linkedSignal dan Pola Lanjutan” gratis?

Ya — teks lengkap “linkedSignal dan Pola Lanjutan” 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 “linkedSignal dan Pola Lanjutan”?

Koordinasikan sinyal yang saling bergantung secara reaktif. 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 4 dari 4.

Berapa lama pelajaran “linkedSignal dan Pola Lanjutan” 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