如何通过 Angular 中的信号输入检测firstChange

Question

现在在我们使用的旧 Angular 代码中

@Input() foo = '';

ngOnChanges(changes: Record<string, SimpleChange | undefined>): void {
  if (changes['foo']) {
    if (changes['foo'].firstChange) {
      // some logic for first change
      console.log('first change', changes['foo'].currentValue);
    } else {
      // another logic for 2+ changes
      console.log(
        '2+ changes',
        changes['foo'].previousValue,
        changes['foo'].currentValue
      );
    }
  }
}

如何使用新的信号输入和效果实现相同的行为？

我已经读到，我可以将信号转换为可观察信号并使用pairwise，但pairwise根本不发出第一个值

这是尝试一下的简单示例https://stackblitz.com/edit/stackblitz-starters-ymnhaw?file=src%2Fcmp%2Fcmp.component.ts

我为什么要问这个问题？因为在信号组件的 RFC 中，提到了

1. 基于信号的组件将仅保留以下生命周期方法

   ngOnInit

   和

   ngOnDestroy

2. ngOnChanges

   - 用于观察输入的变化。由于输入是基于信号的，计算可用于导出新值，或产生副作用。

Answer 1

您可以将以前的值存储在某些（私有）属性中，实际上只需使用最新值更新它，但在更新之前您可以处理您的更改：

  value = input.required<number>();
  #prev: number | null = null;

  #changes = effect(() => {
    console.log(this.value(), this.#prev);
    // you can do your changes handling here

    // then do the update
    this.#prev = this.value();
  });

结果示例：https://stackblitz.com/edit/stackblitz-starters-whk2kj?file=src%2Fmain.ts