Angular Academy · 课时

使用 input() 的信号输入

Q: 「使用 input() 的信号输入」这节课中我会学到什么？

将响应式输入声明为信号。 你通过在浏览器中直接运行的动手代码来练习 Angular Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

将响应式输入声明为信号。

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

基于信号的输入

现代 Angular 提供 input() 函数，可将组件输入声明为信号，用响应式替代方案取代传统的 @Input 装饰器。

声明信号输入

调用带有可选默认值的 input()。其结果是一个只读信号。

import { Component, input } from "@angular/core";

@Component({ selector: "app-greet", template: "" })
export class GreetComponent {
  name = input("World");
}

读取输入

读取信号输入时，需要像调用函数一样调用它，无论是在代码中还是在模板中都是如此。

@Component({
  selector: "app-greet",
  template: "<p>Hello, {{ name() }}</p>"
})
export class GreetComponent {
  name = input("World");
}

从父组件绑定

父组件使用属性绑定来绑定信号输入，方式与绑定传统输入完全相同。

<app-greet [name]="userName"></app-greet>

// parent
userName = "Ada";

输入是只读的

普通的 input() 在组件内部是只读的。您不能对它调用 set；只有父组件可以更改其值。

// this is NOT allowed:
// this.name.set("x");
// inputs are read-only signals

为输入指定类型

请提供泛型类型以确保类型安全，尤其是在没有默认值可供推断时。

age = input<number>();
label = input<string>("Untitled");

在计算值中使用输入

由于输入是信号，因此可以与 computed 集成，以生成能够自动更新的派生状态。

import { input, computed } from "@angular/core";

first = input("");
last = input("");
fullName = computed(() => this.first() + " " + this.last());

将输入与 effect 结合

您可以使用 effect 响应输入变化；每当读取的信号发生变化时，effect 就会重新运行。

constructor() {
  effect(() => {
    console.log("name is", this.name());
  });
}

无需使用 ngOnChanges

使用信号输入后，您通常不再需要 ngOnChanges；computed 和 effect 会自动为您响应变化。

为输入设置别名

您可以通过 alias 选项公开不同的绑定名称。

value = input(0, { alias: "count" });

<!-- parent binds with the alias -->
<app-counter [count]="total"></app-counter>

为什么使用信号输入

信号输入具有响应式和类型安全的特点，并且可以与 computed 和 effect 轻松组合。与装饰器加生命周期的方法相比，它能减少样板代码。

快速检查

测试您对信号输入的理解。

回顾

input() 函数用于声明响应式的只读信号输入。通过调用来读取它们，使用泛型为它们指定类型，在需要时为它们设置别名，并使用 computed 和 effect 代替 ngOnChanges。

常见问题解答

「使用 input() 的信号输入」课时是免费的吗？

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

「使用 input() 的信号输入」这节课中我会学到什么？

将响应式输入声明为信号。你通过在浏览器中直接运行的动手代码来练习 Angular Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Angular Academy 需要有经验吗？

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

「使用 input() 的信号输入」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 Angular Academy