编写和注册值
实现 writeValue 和变更回调
编写和注册值 是 CoddyKit 上的免费 Angular Academy 课时。 这是第 2 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Angular Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Angular Academy 课程共包含 4 节课。
两个核心方法
值访问器的核心是实现双向传递数据：writeValue 将模型值带入视图，而 registerOnChange 提供的回调则将用户编辑结果发送回模型。
writeValue
当表单设置或重置控件的值时，Angular 会调用 writeValue。请将该值保存到组件状态中，让视图反映出来。
value = 0;
writeValue(value: number): void {
this.value = value ?? 0;
}处理 null
重置时，writeValue 可能会接收到 null。请将其规范化为安全的默认值，以免模板出错。
writeValue(value: string | null): void {
this.text = value ?? '';
}registerOnChange
Angular 会向您传递一个回调，以便您在值发生变化时调用它。请保存该回调，并在用户交互时调用。
private onChange: (v: number) => void = () => {};
registerOnChange(fn: (v: number) => void): void {
this.onChange = fn;
}发出更改
用户进行交互时，请更新内部状态，并使用新值调用保存的 onChange 回调，以更新表单模型。
select(rating: number): void {
this.value = rating;
this.onChange(rating);
}连接模板
模板会渲染当前状态，并在用户操作时触发您的处理函数，然后由该函数调用 onChange。
template: '<button *ngFor="let s of stars" (click)="select(s)" [class.on]="s <= value">star</button>'保持视图同步
由于 writeValue 会更新内部状态，而模板绑定了该状态，因此程序化的表单更改（例如 patchValue）会立即反映到您的组件中。
适用于 OnPush
使用 OnPush 变更检测时，请通过组件字段更新状态，并让绑定作出响应。如果您从异步来源修改状态，请标记组件以进行检查，或使用信号来保持视图最新。
不要在 writeValue 中调用 onChange
重要提示：绝不要在 writeValue 内调用 onChange。这样会将程序化更新再次回传给模型，并可能导致循环。onChange 只能用于由用户驱动的更改。
为值指定类型
为您的控件指定具体的值类型（数字、字符串或自定义接口），并相应地为方法指定类型，以便更安全地集成到响应式表单中。
export class RatingComponent implements ControlValueAccessor {
value = 0;
writeValue(v: number) { this.value = v ?? 0; }
registerOnChange(fn: (v: number) => void) { this.onChange = fn; }
}目前的结果
实现了 writeValue 和 registerOnChange 后，控件现在可以从表单模型读取数据，也可以向表单模型写入数据。接下来，您需要添加禁用状态和已接触状态的处理，以完善用户体验。
快速检查
检查您对值写入的掌握情况。
回顾
您实现了 writeValue（将模型同步到视图，并处理 null），并使用 registerOnChange 回调发出用户更改（将视图同步到模型），完成了模板连接，还学会了绝不要在 writeValue 中调用 onChange。
常见问题解答
「编写和注册值」课时是免费的吗？
是的 — 「编写和注册值」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Angular Academy 课程的其余内容，请升级到 CoddyKit PRO。 Angular Academy 课程共包含 4 节课。
「编写和注册值」这节课中我会学到什么？
实现 writeValue 和变更回调 你通过在浏览器中直接运行的动手代码来练习 Angular Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Angular Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Angular Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 4 节。
「编写和注册值」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Angular Academy 课中编写并运行代码吗？
能。每节 Angular Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。