angular - 将以前的值与输出发射器和 ValueChanges 进行比较

Question

我们有一个 Angular 子表单，通过 Valuechanges 发出值。在父组件中，如果子组件的新邮政编码值与以前的邮政编码值不同，我们希望运行任务。

现在，我们正在创建一个变量来存储以前的邮政编码。

有没有更简洁的方法来使用输出来执行此操作？我知道输入的 NgOnchanges，我们可以使用changes.previousValue 跟踪之前的更改。

好奇输出值变化是否有类似的情况？

子表单:

public addressSub = new Subscription();
public editAddressForm: FormGroup;
@Output addressFormChange = new EventEmitter<any>();

this.addressSub.add(this.editAddressForm.valueChanges.subscribe(data=> {
    this.addressFormChange.emit(this.editAddressForm);
})))

父组件:

在父级中，它是订阅的。

public addressFormChangeEvent(addressFormEvent){
    this.addressMailingForm = addressFormEvent;
    if (this.addressMailingForm.get('zipCode') != previousZipCode) {
         doSomethingetc();
    }
    previousZipCode = this.addressMailingForm.get('zipCode');
}

Angular 库中是否有一些东西可以通过 ValueChanges 订阅查看以前的值？

Answer 1

IMO 更简单的方法是在 pairwise 的帮助下完成此操作。和 startWith .
另外，您可以将表单从父组件传递给子组件并在父组件中订阅，例如:

form.valueChanges
    .pipe(startWith(undefined), pairwise())
    .subscribe(valuesArray => {
         const newVal = valuesArray[1];
         const oldVal = valuesArray[0];
         if (newVal !== oldVal) {
             // do your thing
         }
    })