Angular Academy · Ders

linkedSignal ve Gelişmiş Kalıplar

Bağımlı sinyalleri reaktif olarak koordine edin.

4. ders / 413 adım

linkedSignal ve Gelişmiş Kalıplar, CoddyKit'te ücretsiz bir Angular Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Angular Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Angular Academy kursu toplamda 4 dersten oluşur.

linkedSignal'ın Çözdüğü Sorun

Bazen bir kaynağın değiştiğinde sıfırlanan yazılabilir bir durum istersiniz. Düz bir computed salt okunurdur; düz bir sinyal otomatik olarak sıfırlanmaz. linkedSignal() bu iki yaklaşım arasındaki boşluğu doldurur: bir kaynaktan türetilen yazılabilir durum sağlar.

Temel linkedSignal

Bir hesaplama geçirin. Sonuç, kaynağı değiştiğinde yeniden hesaplanan, ancak elle de ayarlanabilen yazılabilir bir sinyaldir.

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'

Neden Sadece Bir Sinyal Kullanmayalım?

Bir kez başlatılan düz bir sinyal, kaynak değiştikten sonra eski bir değeri korur. linkedSignal, arada yazma işlemlerine izin verirken kaynak değiştiğinde yeniden türetir.

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

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

source/computation Biçimi

Gelişmiş biçim, source ile computation değerlerini birbirinden ayırır ve önceki değere erişim sağlar; bu, bir seçimi hâlâ mevcutsa korumak için kullanışlıdır.

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

Kullanıcı Seçimini Koruma

Önceki değer kalıbı, liste güncellendikten sonra hâlâ mevcutsa kullanıcının seçimini korur; değilse varsayılan değere geri döner. Bu, kullanıcı deneyimi açısından harika bir ayrıntıdır.

linkedSignal Yazılabilirdir

computed'ın aksine, bir linkedSignal üzerinde .set() ve .update() çağırabilirsiniz. Elle ayarlanan değer, kaynak yeniden değişene kadar korunur.

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

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

Kalıp: Bağımlı Açılır Listeler

Ülke -> Şehir: ülke değiştiğinde şehri kullanılabilir ilk şehre sıfırlayın; ancak kullanıcının başka bir şehir seçmesine izin verin.

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

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

Kalıp: İyimser Arayüz Durumu

linkedSignal, sunucu verilerinden türetilen iyimser bir değeri tutabilir; aynı zamanda arayüzün bu değeri hemen geçersiz kılmasına ve yeni veriler geldiğinde yeniden eşitlenmesine izin verir.

Effect'lerle Birleştirme

Örneğin mevcut seçimi kalıcı hâle getirmek için linkedSignal değişikliklerine bir effect ile tepki verebilirsiniz.

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

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

linkedSignal Ne Zaman Kullanılmamalı

Türetilen değer yalnızca okunacaksa computed() kullanın. Değerin bir kaynaktan yeniden sıfırlanması hiç gerekmiyorsa düz bir signal() kullanın. linkedSignal'a yalnızca hem yazılabilir hem de kaynaktan sıfırlanabilir bir değere ihtiyacınız olduğunda başvurun.

Gelişmiş Tepkisel Grafik

signal -> computed -> linkedSignal -> effect, eksiksiz bir tepkisel işlem hattı oluşturur: ham girdiler, katışıksız türetmeler, yazılabilir ve sıfırlanabilir durum ile yan etkiler; üstelik bunların tümü elle abonelik yapılmadan gerçekleşir.

Kısa Kontrol

linkedSignal'ı ne kadar anladığınızı test edin.

İnteraktif derste cevapla

Özet: linkedSignal ve Gelişmiş Kalıplar

linkedSignal(), bir kaynaktan sıfırlanan yazılabilir durum sağlar.

Kullanıcı seçimini korumak için kaynak/hesaplama biçimini kullanın.
Bağımlı açılır listeler ve iyimser kullanıcı arayüzü için idealdir.
Salt okunur durum için computed, sıfırlanmayan durum için düz sinyal kullanın.

Signals kursunu tamamladınız.

Başlamak ücretsiz

Yapay zeka eğitmeniyle HTML öğren — ücretsiz

Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.

Kurslar: 38
Dersler: 144

Ücretsiz öğrenmeye başla Tüm kursu görüntüle

Sıkça Sorulan Sorular

“linkedSignal ve Gelişmiş Kalıplar” dersi ücretsiz mi?

Evet — “linkedSignal ve Gelişmiş Kalıplar” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Angular Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Angular Academy kursu toplamda 4 dersten oluşur.

“linkedSignal ve Gelişmiş Kalıplar” dersinde ne öğreneceğim?

Bağımlı sinyalleri reaktif olarak koordine edin. Angular Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Angular Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Angular Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.

“linkedSignal ve Gelişmiş Kalıplar” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Angular Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Angular Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← Angular Academy Sayfasına Dön