Angular Academy · 课时

自定义双向绑定属性

Q: 「自定义双向绑定属性」这节课中我会学到什么？

公开自定义的双向绑定输入。 你通过在浏览器中直接运行的动手代码来练习 Angular Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

公开自定义的双向绑定输入。

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

自定义双向绑定

您可以让任意组件属性支持双向绑定。Angular 支持两种方式：经典的 @Input 加 @Output 配对，或现代的 model() 信号。

命名约定

要使双向绑定生效，输出名称必须是输入名称加上后缀 Change。例如，输入 size 需要对应的输出 sizeChange。

声明输入

先从一个普通输入开始，父组件可以为它设置值。

import { Input } from "@angular/core";

export class RatingComponent {
  @Input() value = 0;
}

声明匹配的输出

添加一个带有 Change 后缀名称的 @Output EventEmitter。

import { Input, Output, EventEmitter } from "@angular/core";

export class RatingComponent {
  @Input() value = 0;
  @Output() valueChange = new EventEmitter<number>();
}

在更新时发出事件

当组件在内部更改值时，请更新该属性并发出新值，以便父组件保持同步。

setValue(v: number) {
  this.value = v;
  this.valueChange.emit(v);
}

从父组件进行绑定

现在，父组件可以针对您的自定义属性使用盒中香蕉语法。

<app-rating [(value)]="score"></app-rating>

// parent
score = 3;

完整的输入/输出示例

下面是一个使用经典 API 的完整自定义双向绑定组件。

@Component({
  selector: "app-rating",
  template: "<button (click)='bump()'>{{ value }}</button>"
})
export class RatingComponent {
  @Input() value = 0;
  @Output() valueChange = new EventEmitter<number>();
  bump() {
    this.value++;
    this.valueChange.emit(this.value);
  }
}

现代的 model 方式

使用 model() 可以大幅缩短实现相同的行为，因为它会为您创建输入和输出配对。

import { model } from "@angular/core";

@Component({
  selector: "app-rating",
  template: "<button (click)='bump()'>{{ value() }}</button>"
})
export class RatingComponent {
  value = model(0);
  bump() { this.value.update(v => v + 1); }
}

比较两种方式

经典配对方式明确且处处适用；model() 简洁并基于信号。两者都会向父组件公开相同的 [(value)] 绑定。

多个双向绑定属性

组件可以公开多个支持双向绑定的属性，每个属性都遵循输入/输入Change 约定。

@Input() min = 0;
@Output() minChange = new EventEmitter<number>();
@Input() max = 100;
@Output() maxChange = new EventEmitter<number>();

选择一种方式

对于新代码，建议使用 model()，因为它更简洁并支持信号集成。当您需要精细控制或不使用信号时，请使用明确的输入/输出配对。

快速检查

测试您对自定义双向绑定属性的理解。

回顾

自定义双向绑定需要一个输入，以及一个名为 inputChange 的输出，并在每次更新时发出事件。现代的 model() 信号会自动创建这一配对，是新代码的简洁选择。

常见问题解答

「自定义双向绑定属性」课时是免费的吗？

是的 — 「自定义双向绑定属性」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 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