Angular信号输入变更时如何仅触发关联函数？需类似ngOnChanges功能

1. 拆分Effect，精准绑定依赖 #

你当前的effect会在任意输入信号变化时执行所有函数，原因是effect内部读取了所有三个输入信号（initialPrice、minValue、maxValue），Angular会追踪这些依赖，只要其中一个变化就触发整个effect。

要实现单个输入变化仅触发对应函数，需要为每组关联的输入-函数创建独立的effect，只在effect内部读取该组依赖的信号：

// 仅当initialPrice变化时，执行相关函数
effect(() => {
  this.handleNormalizeChange();
  this.updateFormattedCurrentPrice();
});

// 仅当minValue或maxValue变化时，执行验证器更新函数
effect(() => {
  this.updateValidators(this.minValue(), this.maxValue());
});

这样，initialPrice变化只会触发第一个effect，minValue/maxValue变化只会触发第二个effect，完全隔离了不同输入的触发逻辑。

2. 获取前后值（替代ngOnChanges的变更快照） #

如果需要像ngOnChanges那样获取输入的前值和当前值，可以为每个输入信号维护一个单独的信号来保存前值，在effect中更新并对比：

步骤1：定义保存前值的私有信号

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

@Component({/* ... */})
export class YourComponent {
  initialPrice = input<number | undefined>();
  maxValue = input<number>(999999999);
  minValue = input<number>(0);

  // 保存各输入的前值
  private prevInitialPrice = signal<number | undefined>(undefined);
  private prevMaxValue = signal<number>(999999999);
  private prevMinValue = signal<number>(0);

步骤2：在effect中获取并更新前后值

注意：由于要在effect中修改信号，需要开启allowSignalWrites选项：

// 处理initialPrice的变更，带前后值
effect(() => {
  const current = this.initialPrice();
  const prev = this.prevInitialPrice();
  
  // 把前后值传入函数
  this.handleNormalizeChange(prev, current);
  this.updateFormattedCurrentPrice(prev, current);
  
  // 更新前值信号
  this.prevInitialPrice.set(current);
}, { allowSignalWrites: true });

// 处理minValue/maxValue的变更，带前后值
effect(() => {
  const currentMin = this.minValue();
  const prevMin = this.prevMinValue();
  const currentMax = this.maxValue();
  const prevMax = this.prevMaxValue();
  
  // 传入前后值到验证器更新函数
  this.updateValidators(prevMin, currentMin, prevMax, currentMax);
  
  // 更新前值信号
  this.prevMinValue.set(currentMin);
  this.prevMaxValue.set(currentMax);
}, { allowSignalWrites: true });

关键说明 #

• 每个effect只会追踪内部实际读取的信号，所以拆分后能精准触发对应逻辑。
• allowSignalWrites选项用于允许在effect中修改信号（默认effect禁止写入，防止循环依赖），这里仅用于更新前值，不会引发风险。
• 如果某个函数依赖多个信号（比如updateValidators依赖min和max），就把这些信号都放在同一个effect里，这样任意一个信号变化都会触发该函数。

内容的提问来源于stack exchange，提问作者Lorenzo Del Gaudio