Angular Academy · Урок

linkedSignal и продвинутые шаблоны

Реактивно координируйте зависимые сигналы.

«linkedSignal и продвинутые шаблоны» — бесплатный урок Angular Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Angular Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Angular Academy содержит 4 уроков всего.

Какую проблему решает linkedSignal

Иногда Вам нужно изменяемое состояние, которое также сбрасывается при изменении источника. Обычный computed доступен только для чтения, а обычный сигнал не сбрасывается автоматически. linkedSignal() объединяет эти возможности: это изменяемое состояние, производное от источника.

Простой linkedSignal

Передайте вычисление. Результатом будет изменяемый сигнал, который пересчитывается при изменении источника, но также может изменяться вручную.

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'

Почему не использовать обычный сигнал?

Обычный сигнал, инициализированный один раз, сохранит устаревшее значение после изменения источника. linkedSignal повторно вычисляет значение при изменении источника, сохраняя возможность изменять его в промежутках.

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

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

Форма с source и computation

Расширенная форма отделяет source от computation и предоставляет доступ к предыдущему значению — это полезно для сохранения выбранного элемента, если он всё ещё существует.

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

Сохранение выбора пользователя

Шаблон с предыдущим значением сохраняет выбор пользователя, если он всё ещё существует после обновления списка, а в противном случае использует значение по умолчанию — отличный штрих для удобства работы.

linkedSignal допускает запись

В отличие от computed, для linkedSignal можно вызвать .set() и .update(). Установленное вручную значение сохраняется, пока источник снова не изменится.

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

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

Шаблон: зависимые раскрывающиеся списки

Страна -> город: при изменении страны сбрасывайте город на первый доступный вариант, но позволяйте пользователю выбрать другой.

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

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

Шаблон: оптимистичное состояние интерфейса

linkedSignal может хранить оптимистичное значение, полученное из данных сервера, позволяя интерфейсу немедленно переопределить его и синхронизировать заново после получения свежих данных.

Сочетание с эффектами

Можно реагировать на изменения linkedSignal с помощью эффекта, например сохранять текущий выбор.

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

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

Когда НЕ следует использовать linkedSignal

Если производное значение доступно только для чтения, используйте computed(). Если значение никогда не нужно сбрасывать из источника, используйте обычный signal(). Выбирайте linkedSignal только тогда, когда Вам нужны обе возможности: изменение и сброс из источника.

Расширенный реактивный граф

signal -> computed -> linkedSignal -> effect образуют полный реактивный конвейер: исходные входные данные, чистые производные значения, изменяемое состояние со сбросом и побочные эффекты — всё без ручных подписок.

Быстрая проверка

Проверьте своё понимание linkedSignal.

Итоги: linkedSignal и продвинутые шаблоны

linkedSignal() предоставляет изменяемое состояние, сбрасываемое на основе источника.

Используйте форму с источником или вычислением, чтобы сохранять выбор пользователя.
Отлично подходит для связанных раскрывающихся списков и оптимистичного интерфейса.
Для состояния только для чтения используйте computed, а для состояния без сброса — обычный сигнал.

Вы завершили курс по сигналам.

Часто задаваемые вопросы

Урок «linkedSignal и продвинутые шаблоны» бесплатный?

Да — полный текст урока «linkedSignal и продвинутые шаблоны» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Angular Academy, подпишись на CoddyKit PRO. Курс Angular Academy содержит 4 уроков всего.

Чему я научусь в уроке «linkedSignal и продвинутые шаблоны»?

Реактивно координируйте зависимые сигналы. Ты практикуешь Angular Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Angular Academy?

Предыдущий опыт не требуется. Angular Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.

Сколько времени занимает урок «linkedSignal и продвинутые шаблоны»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Angular Academy?

Да. Каждый урок Angular Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к Angular Academy