使用Angular信号式输入时，能否借助ngOnChanges监听值变化？

在Angular的信号式输入体系中，你可以通过以下两种常用方式监听值变化并执行操作，完美适配你在模态框表单组件中的场景：

1. 使用effect()处理副作用（推荐） #

effect()是Angular信号系统中处理副作用的核心API，会自动追踪信号依赖，当inputVar的值变化时自动触发。它会在组件初始化时执行一次，之后每次信号更新都会运行，非常适合同步表单这类场景：

import { input, effect } from '@angular/core';
import { FormGroup } from '@angular/forms';

@Component({
  selector: 'app-modal-form',
  templateUrl: './modal-form.component.html'
})
export class ModalFormComponent {
  inputVar = input<SomeType>();
  yourForm: FormGroup; // 假设你已定义好表单实例

  constructor() {
    // 监听inputVar变化，同步数据到表单
    effect(() => {
      const entry = this.inputVar();
      if (entry) {
        this.yourForm.patchValue(entry);
      }
    });
  }
}

2. 使用watch()获取新旧值（精细控制） #

如果你需要像ngOnChanges那样获取变化前后的值，可以用watch()函数（Angular 17+支持），它允许你明确处理新旧值的差异：

import { input, watch } from '@angular/core';

@Component({...})
export class ModalFormComponent {
  inputVar = input<SomeType>();

  constructor() {
    watch(this.inputVar, (newValue, oldValue) => {
      // 按需跳过初始化时的首次触发，或直接处理逻辑
      if (newValue && newValue !== oldValue) {
        this.updateForm(newValue);
      }
    }, { initialRun: false }); // initialRun设为false则初始化阶段不执行，默认值为false
  }

  private updateForm(entry: SomeType) {
    // 这里编写表单更新或其他业务逻辑
    this.yourForm.patchValue(entry);
  }
}

模态框场景适配提示 #

因为你是在NgbModal中复用表单组件，每次选中新条目传入时，信号式输入会自动更新，effect或watch会自动触发对应逻辑，无需额外处理模态框的打开/关闭事件（若需要清空表单状态，可结合模态框的beforeDismiss等事件补充逻辑）。

内容的提问来源于stack exchange，提问作者Richard77