Angular Academy · Lekcja

linkedSignal i zaawansowane wzorce

Reaktywnie koordynuj zależne sygnały.

linkedSignal i zaawansowane wzorce to bezpłatna lekcja Angular Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Angular Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Angular Academy zawiera 4 lekcji w sumie.

Problem rozwiązywany przez linkedSignal

Czasami potrzebujesz stanu, który można zapisywać, a który jednocześnie resetuje się po zmianie źródła. Zwykły sygnał obliczany jest tylko do odczytu, a zwykły sygnał nie resetuje się automatycznie. linkedSignal() łączy te możliwości: jest to stan zapisywalny wyprowadzony ze źródła.

Podstawowy linkedSignal

Przekaż funkcję obliczeniową. Wynikiem jest sygnał zapisywalny, który przelicza się po zmianie źródła, ale można go również ustawiać ręcznie.

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'

Dlaczego nie zwykły sygnał?

Zwykły sygnał zainicjalizowany raz zachowałby nieaktualną wartość po zmianie źródła. linkedSignal wyprowadza wartość ponownie przy każdej zmianie źródła, a jednocześnie pozwala na zapisy pomiędzy tymi zmianami.

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

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

Forma source/computation

Zaawansowana forma rozdziela source i computation oraz udostępnia poprzednią wartość — jest to przydatne do zachowania zaznaczenia, jeśli nadal istnieje.

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

Zachowywanie wyboru użytkownika

Wzorzec z poprzednią wartością zachowuje wybór użytkownika, jeśli nadal istnieje po aktualizacji listy; w przeciwnym razie przełącza się na wartość domyślną — to świetne usprawnienie UX.

linkedSignal można zapisywać

W przeciwieństwie do computed na linkedSignal można wywoływać .set() i .update(). Wartość ustawiona ręcznie obowiązuje do kolejnej zmiany źródła.

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

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

Wzorzec: zależne listy rozwijane

Kraj -> Miasto: po zmianie kraju zresetuj miasto do pierwszego dostępnego, ale pozwól użytkownikowi wybrać inne.

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

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

Wzorzec: optymistyczny stan interfejsu

linkedSignal może przechowywać optymistyczną wartość wyprowadzoną z danych serwera, pozwalając interfejsowi natychmiast ją nadpisać i ponownie zsynchronizować po nadejściu świeżych danych.

Łączenie z efektami

Możesz reagować na zmiany linkedSignal za pomocą efektu, na przykład aby utrwalać bieżący wybór.

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

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

Kiedy NIE używać linkedSignal

Jeśli wartość pochodna jest wyłącznie do odczytu, użyj computed(). Jeśli wartość nigdy nie musi resetować się na podstawie źródła, użyj zwykłego signal(). Sięgaj po linkedSignal tylko wtedy, gdy potrzebujesz jednocześnie możliwości zapisu i resetowania na podstawie źródła.

Zaawansowany graf reaktywny

signal -> computed -> linkedSignal -> effect tworzą kompletny reaktywny potok: surowe dane wejściowe, czyste wyprowadzenia, zapisywalny stan resetowany ze źródła oraz efekty uboczne — wszystko bez ręcznych subskrypcji.

Szybki sprawdzian

Sprawdź swoją wiedzę na temat linkedSignal.

Podsumowanie: linkedSignal i zaawansowane wzorce

linkedSignal() zapewnia zapisywalny stan resetowany na podstawie źródła.

Użyj formy ze źródłem/obliczeniem, aby zachować wybór użytkownika.
Świetnie sprawdza się w zależnych listach rozwijanych i optymistycznym interfejsie użytkownika.
Użyj computed dla wartości tylko do odczytu, a zwykłego sygnału dla stanu, który nie jest resetowany.

Ukończyli Państwo kurs Signals.

Często zadawane pytania

Czy lekcja „linkedSignal i zaawansowane wzorce” jest bezpłatna?

Tak — pełny tekst „linkedSignal i zaawansowane wzorce” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Angular Academy, przejdź na CoddyKit PRO. Kurs Angular Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „linkedSignal i zaawansowane wzorce”?

Reaktywnie koordynuj zależne sygnały. Ćwiczysz Angular Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Angular Academy?

Nie wymagamy żadnego doświadczenia. Angular Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.

Ile czasu zajmuje lekcja „linkedSignal i zaawansowane wzorce”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Angular Academy?

Tak. Każda lekcja Angular Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do Angular Academy