Можно ли получить доступ к старому значению в функции effect() Angular 16 (аналогично часам Vue.js)?

Question

В Vue.jswatchФункция получает новое и старое отслеживаемое значение, передаваемое в качестве аргументов , что действительно полезно в случае, если различия имеют значение или когда я хочу освободить предыдущий выделенный ресурс.

Теперь в Angular 16 у нас наконец-то естьsignal,computed, и .effect()кажется, это эквивалент часов в Vue.js. Но есть ли возможность получить доступ к старому значению?

В документации Angular API упоминается толькоonCleanup. Какeffectне работает с выражением, как в Vue, может оказаться невозможным сохранить предыдущее значение общим способом.

Есть ли обходной путь?

Answer 1

Эффект не возвращает старое значение, поскольку сигналы сохраняют только текущее значение. Angular выпустила пакет взаимодействия rxjs,@angular/core/rxjs-interop, которые помогут вам в подобных случаях. Вы можете использоватьtoObservableфункционируйте следующим образом, чтобы достичь того, чего вы хотите:

      /**
  * Signal version of count
  */
count = signal(0);

/**
  * Straight conversion to observable
  */
count$ = toObservable(this.count);

/**
  * Pairwise conversion to achieve old/new functionality
  */
countPrevAndCurr$ = this.count$.pipe(
  pairwise(),
  map(([oldVal, newVal]) => {
    console.log('Old Value (Observable): ', oldVal);
    console.log('New Value (Observable): ', newVal);
    return { old: oldVal, new: newVal };
  })
);

Вот StackBlitz , показывающий функциональность в действии.

Примечание. На момент написания этого ответа пакеты Angular Signals и Rxjs Interop находились в предварительной версии для разработчиков, поэтому потенциально могут быть изменены.

Answer 2

Angular'seffectне позволяет прослушивать конкретное изменение свойства.

Как сказал @Eliseo, вы можете добиться этого, используя rxjs:

      toObservable(mySignal)
   .pipe(
      pairwise(), 
      map(([oldValue, newValue]) => { ... })
    )

Answer 3

` public HistoricalValue: Any = [] public messageAlert = false;

      public countEffect = effect(()=>{    
 this.historicValue.unshift(this.counterPrueba());
  if(this.historicValue.length > 1){
    this.alert = `El contador ${this.historicValue[1]} se ha modificado a  ${this.counterPrueba()}`
    this.messageAlert = true;
  } 

});`