Angular Academy · 课时

linkedSignal 与高级模式

Q: 「linkedSignal 与高级模式」这节课中我会学到什么？

以响应式方式协调相互依赖的信号。 你通过在浏览器中直接运行的动手代码来练习 Angular Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

以响应式方式协调相互依赖的信号。

linkedSignal 与高级模式 是 CoddyKit 上的免费 Angular Academy 课时。这是第 4 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Angular Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Angular Academy 课程共包含 4 节课。

linkedSignal 解决的问题

有时您希望拥有可写状态，并且在某个源发生变化时让它重置。普通计算信号是只读的；普通信号不会自动重置。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 分开，并提供对前一个值的访问——这对于在选项仍然存在时保留选择很有用。

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 可以保存从服务器数据派生的乐观值，同时允许界面立即覆盖该值，并在新数据到达时重新同步。

与 Effect 结合使用

您可以使用 Effect 响应 linkedSignal 的变化，例如持久化当前选择。

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

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

何时不应使用 linkedSignal

如果派生值纯粹是只读的，请使用 computed()。如果该值永远不需要根据源重置，请使用普通的 signal()。只有在同时需要可写和可根据源重置时，才应使用 linkedSignal。

高级响应式图

signal -> computed -> linkedSignal -> effect 构成了完整的响应式流水线：原始输入、纯派生值、可写且可重置的状态，以及副作用——全部无需手动订阅。

快速检查

检验您对 linkedSignal 的理解。

总结：linkedSignal 与高级模式

linkedSignal() 为您提供可从源重置的可写状态。

使用源/计算形式来保留用户选择。
非常适合用于依赖下拉框和乐观用户界面。
只读状态请使用 computed，不会重置的状态请使用普通 signal。

您已完成 Signals 课程。

常见问题解答

「linkedSignal 与高级模式」课时是免费的吗？

是的 — 「linkedSignal 与高级模式」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Angular Academy 课程的其余内容，请升级到 CoddyKit PRO。 Angular Academy 课程共包含 4 节课。

「linkedSignal 与高级模式」这节课中我会学到什么？

以响应式方式协调相互依赖的信号。你通过在浏览器中直接运行的动手代码来练习 Angular Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Angular Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Angular Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 4 节课，共 4 节。

「linkedSignal 与高级模式」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Angular Academy 课中编写并运行代码吗？

能。每节 Angular Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Angular Academy