Question

一个简单的问题，我以前没有想到。

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

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

因为我要重构所有形式，所以我的第一个想法是删除(keyup)并使用someControl.valueChanges.subscribe(..)，但是现在我对此表示怀疑，因为如果这样做，我只会向该组件添加更多代码（f .ex。import Subscription，也要取消订阅OnDestroy，然后再进行someControl.valueChanges.subscribe）。因此，与keyup相比，valueChanges.subscribe添加了更多代码。

我没有意识到其中有什么好处吗？

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

Answer 1

如果您使用valueChanges，则您也可以使用管道运算符并操纵输入值。例如：

this.formControl.valueChanges
.pipe(
    distinctUntilChanged(),
    filter(v => v.length > 3),
    tap(console.log))
.subscribe();

Answer 2

我同意蒂姆对您的帖子的评论：例如，当您将一些文本复制粘贴到您的表单中，在这种情况下还应触发valueChanges AFAIK

Answer 3

我会在valuesChanges()上使用keyup，因为您不太可能错过任何内容，因为它在侦听表单控件值的更改而不是事件。因此，无论是实用还是通过dom进行更改，都会注意到更改。

这将需要使用unsub处理，因为这不是一个http请求，完成后订阅将不会手动取消订阅。我会尝试类似的东西。

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

Answer 4

正如我在评论中提到的， valueChanges 将对复制/粘贴的值或从浏览器自动插入的值（自动填充表格）做出反应。此外，关键事件可能不是移动设备上的正确选择，在其他情况下，其他事件可能会导致表单中的值被更改。

我认为，仅在没有其他选择的情况下才使用KeyListeners 。它们可能会影响您应用的性能。

FormControl valueChanges.subscribe与keyup

4 个答案: