typescript - hvordan oppdage førsteEndring med signalinput i Angular

nå i den gamle Angular-koden vi brukte

@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
      );
    }
  }
}

hvordan oppnå den samme oppførselen ved bruk av den nye signalinngangen og effekten?

Jeg har lest at jeg kan konvertere signalet til observable og bruke pairwise, men pairwise sender ikke ut noe for den første verdien i det hele tatt

her er et enkelt eksempel for å prøve det ut https://stackblitz.com/edit/stackblitz-starters-ymnhaw?file=src%2Fcmp%2Fcmp.component.ts

hvorfor jeg stiller dette spørsmålet? fordi det i RFC-en for signal-komponenter er nevnt at

1. Signal-baserte komponenter vil kun beholde følgende livssyklusmetoder ngOnInit og ngOnDestroy
2. ngOnChanges - brukes til å observere endringer i inputverdier. Siden inputverdier er signalbaserte, kan computed brukes til å utlede nye verdier, eller effect til å reagere med sideeffekter.

Svar #1

Du kan lagre forrige verdi i en (privat) egenskap og i praksis bare oppdatere den med den nyeste verdien, men før du oppdaterer kan du håndtere endringen din:

  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();
  });

resultat eksempel: https://stackblitz.com/edit/stackblitz-starters-whk2kj?file=src%2Fmain.ts

Svar #2

Jeg har det samme problemet. Det ser ut til å være en manglende funksjonalitet som trengs i nyere versjoner av Angular.

Når det er sagt, her er hvordan jeg oppnår det i Angular 17/18 ved å bruke effekt:

foo = input<string>();

private prevFoo: string;

private onFooChanged = effect(
  () => {
    const foo = this.foo();

    if (this.prevFoo === undefined) {
      // this is the first change, do something...
    } else {
      // this is not the first change, do something else...
    }

    this.prevFoo = foo;
  }
);

Det ser virkelig ut som for mye standardkode for en så enkel ting. Jeg håper de introduserer noen verktøy for det.