Angular Academy · 课时

模板中的信号

Q: 「模板中的信号」这节课中我会学到什么？

直接在组件模板中绑定信号值。 你通过在浏览器中直接运行的动手代码来练习 Angular Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

直接在组件模板中绑定信号值。

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

模板中的 Signals

Signals 最方便的特性之一，就是可以像在 TypeScript 中一样，通过调用它们直接在模板中读取。不需要异步管道。

在插值中读取

在模板中，在双大括号插值内调用 Signal，以显示其值。

@Component({
  selector: 'app-counter',
  template: '<p>Count: {{ count() }}</p>'
})
export class CounterComponent {
  count = signal(0);
}

无需异步管道

使用 Observables 时，您需要异步管道来订阅和取消订阅。Signals 是同步的，因此只需调用它们即可。不需要取消订阅。

自动更新视图

当模板中读取的 Signal 发生变化时，Angular 会知道该模板依赖于它，并且只更新相应的绑定。这就是细粒度响应式的实际应用。

在事件处理程序中调用 Signals

将事件绑定到会更新 Signals 的组件方法。模板会自动重新渲染受影响的绑定。

@Component({
  selector: 'app-counter',
  template: '<button (click)="inc()">{{ count() }}</button>'
})
export class CounterComponent {
  count = signal(0);
  inc() { this.count.update(v => v + 1); }
}

属性绑定中的 Signals

您可以在任何绑定中调用 Signal，包括属性绑定和特性绑定。

// disabled when count reaches 0
// template: <button [disabled]="count() === 0">Go</button>

Signals 与内置控制流

现代模板使用内置控制流代码块。在 if 代码块中，只需调用 Signal 即可读取它。

// template:
// @if (count() > 0) {
//   <p>Positive</p>
// }

模板中的计算 Signals

派生值非常适合用于模板。计算 Signal 只会在其源发生变化时重新计算，读取方式也相同。

import { signal, computed } from '@angular/core';

export class CartComponent {
  qty = signal(2);
  price = signal(10);
  total = computed(() => this.qty() * this.price());
}

在视图中读取计算 Signal

在模板中读取计算 Signal 的方式与读取普通 Signal 一样。

// template: <p>Total: {{ total() }}</p>

高效的原因

由于 Angular 会精确跟踪哪些模板表达式读取了哪些 Signals，因此对于不依赖于已变化 Signal 的视图部分，它可以跳过相应工作。

常见陷阱：忘记括号

如果您在模板中写的是 count 而不是 count()，显示的将是 Signal 函数本身，而不是它的值。请始终调用 Signal。

快速检查：模板

Signals 在模板中如何使用？

回顾：模板中的 Signals

您可以在模板中通过加括号调用 Signals 来读取它们，不需要异步管道，也不需要取消订阅。Angular 只会更新依赖于已变化 Signal 的绑定，计算 Signals 的工作方式也相同。您已经完成了 Signals 基础知识的学习。

常见问题解答

「模板中的信号」课时是免费的吗？

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

「模板中的信号」这节课中我会学到什么？

直接在组件模板中绑定信号值。你通过在浏览器中直接运行的动手代码来练习 Angular Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Angular Academy 需要有经验吗？

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

「模板中的信号」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 Angular Academy