angular - FormControl valueChanges.subscribe 与 keyup

标签 angular rxjs angular-forms

我以前没想过的简单问题。

我开始了一个项目并找到了代码:

<input (keyup)="someFunc($event)" [formControl]="someControl">

因为我在重构所有的表单,所以我首先想到的是去掉(keyup),改用someControl.valueChanges.subscribe(..),但是现在我有疑惑了因为如果我这样做,我只是向组件添加更多代码(例如导入订阅,OnDestroy 也取消订阅,然后是 someControl.valueChanges.subscribe)。因此与 keyup 相比,valueChanges.subscribe 增加了更多的代码。

它有什么我没有意识到的好处吗?

附注我知道,使用 keyup 时,它会在用户释放按钮时触发,而 valueChanges.subscribe 当用户按下按钮时触发。但就我而言,这种差异并不重要。

最佳答案

我会使用 valuesChanges() 而不是 keyup 因为你不太可能错过任何东西,因为它正在监听表单控件值的更改而不是事件。因此,无论它是如何以务实的方式或通过 dom 进行更改,都会注意到更改。

虽然这不是 http 请求,但需要使用 unsub 处理,订阅完成后不会手动取消订阅。我会尝试类似的东西。

public subscriptions = new Subscription();

this.subscriptions.add(this.formControl.valueChanges
.pipe(distinctUntilChanged()) // makes sure the value has actually changed.
.subscribe(data => console.log(data)));

public ngOnDestroy(): void
{
    this.subscriptions.unsubscribe();
    // ensure when component is destroyed the subscription is also and not left open.
}

可以找到取消订阅的例子here

关于angular - FormControl valueChanges.subscribe 与 keyup,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56627029/

相关文章:

在 ts 代码中带有 i18n 的 Angular 6 应用程序

javascript - 如何使用rxjs尽早逃脱捕获链?

angular - 如何创建一个仅在订阅时每 10 秒(间隔)更新其值的 Observable?

javascript - Angular 响应式(Reactive)嵌套形式

angular - 使用 Angular 返回 404 的路由

CSS flexbox 内的 Angular CDK 拖放问题

javascript - 过滤并比较 typescript 中的两个数组与条件

angular - 从 ngrx/store 中提取特定数据

angular - 如何使用模式验证 mat-datepicker 输入?

angular - 即使必填字段为空白,在表单内单击时也会以 Angular 提交