Angular Academy · 课时

ngOnChanges 与输入变更

Q: 「ngOnChanges 与输入变更」这节课中我会学到什么？

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

响应输入属性的变化。

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

响应输入变化

OnChanges 钩子让组件能够在其 @Input 属性发生变化时作出响应。Angular 会在 ngOnInit 之前以及每次输入更新时调用 ngOnChanges。

实现 OnChanges

实现 OnChanges 接口，并添加一个接收 SimpleChanges 对象的 ngOnChanges 方法。

import { Component, Input, OnChanges, SimpleChanges } from "@angular/core";

@Component({ selector: "app-demo", template: "" })
export class DemoComponent implements OnChanges {
  @Input() count = 0;
  ngOnChanges(changes: SimpleChanges): void {
    console.log(changes);
  }
}

SimpleChanges 对象

SimpleChanges 是一个以输入名称为键的映射。每个条目都是一个 SimpleChange，包含 currentValue、previousValue 和 firstChange。

ngOnChanges(changes: SimpleChanges) {
  const c = changes["count"];
  if (c) {
    console.log(c.previousValue, "->", c.currentValue);
  }
}

检测首次变化

firstChange 标志在首次设置输入时为 true。您可以用它区分初始化和后续更新。

ngOnChanges(changes: SimpleChanges) {
  if (changes["count"]?.firstChange) {
    console.log("initial value");
  } else {
    console.log("updated value");
  }
}

响应特定输入

读取输入前，请始终检查对应的键是否存在，因为并非每个输入都会在每个周期发生变化。

ngOnChanges(changes: SimpleChanges) {
  if ("userId" in changes) {
    this.reload(this.userId);
  }
}

基于引用的检测

对于对象和数组，ngOnChanges 会在引用发生变化时触发。修改作为输入传入的对象不会触发它。

// will NOT trigger ngOnChanges in parent-bound child:
this.config.theme = "dark";

// will trigger it:
this.config = { ...this.config, theme: "dark" };

与 ngOnInit 的顺序

创建组件时，ngOnChanges 会先使用初始输入运行，然后运行 ngOnInit。此后，每当输入发生变化，ngOnChanges 都会再次运行。

比较旧值和新值

一种常见用法是仅在值确实不同时作出响应，例如在 id 输入变化时重新加载数据。

ngOnChanges(changes: SimpleChanges) {
  const id = changes["userId"];
  if (id && id.currentValue !== id.previousValue) {
    this.fetchUser(id.currentValue);
  }
}

使用类型确保安全

您可以从 changes 中读取值，也可以直接读取组件属性；ngOnChanges 执行完后，该属性已经保存当前值。

ngOnChanges() {
  // this.count already updated here
  this.total = this.count * 2;
}

何时不使用 OnChanges

对于由单个输入推导出的状态，使用获取器或计算值可能更清晰。只有需要在输入更新时执行副作用时，才使用 ngOnChanges。

同时变化的多个输入

如果多个输入在同一个周期发生变化，ngOnChanges 会使用包含所有这些输入的 SimpleChanges 映射调用一次。

ngOnChanges(changes: SimpleChanges) {
  // both keys may be present
  if (changes["min"] || changes["max"]) {
    this.validateRange();
  }
}

快速检查

检查您对 OnChanges 的理解。

回顾

OnChanges 钩子通过包含 currentValue、previousValue 和 firstChange 的 SimpleChanges 映射响应输入变化。它会在引用发生变化时触发，因此请使用不可变更新。

常见问题解答

「ngOnChanges 与输入变更」课时是免费的吗？

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

「ngOnChanges 与输入变更」这节课中我会学到什么？

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

学习 Angular Academy 需要有经验吗？

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

「ngOnChanges 与输入变更」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 Angular Academy