检查新值时，角度异步验证器不会被取消订阅答案

【问题标题】：Angular async valildator not getting unsubscribed when a new value is checked检查新值时，角度异步验证器不会被取消订阅
【发布时间】：2018-02-25 17:47:51
【问题描述】：

我正在尝试创建一个验证器来检查电子邮件地址是否已经存在，并且像往常一样，我们不希望服务器在用户仍在输入字段中输入电子邮件地址时受到请求的冲击。

目前代码如下

return Observable.timer(1000).switchMap(() => {
       return this.userService.emailExists(control.value)
        .mapTo(exist => Observable.of({ "emailExists": exist }))
        .catch(err => Observable.of({ "emailExists": true }));
    }).subscribe();

通过阅读之前的 Stackoverflow 帖子 (https://stackoverflow.com/a/45080026/5247016)，当验证器一遍又一遍地运行时，它应该从之前的 observable 中取消订阅（不将它们排队），但似乎没有这样做，所以使用上面的代码我们每次按下键并执行 1 秒计时器时都会命中服务器。

https://stackoverflow.com/a/45080026/5247016 我的代码和帖子之间存在差异 - 没有 .subscribe() 没有任何作用，并且永远不会进行可观察的 http 调用 - 所以我只能假设对 Angular 或 Rxjs 的更新导致这种行为发生了变化。

我们想要做的是，使用 Observables 而不使用 setTimeout 和 clearTimeout，使用 Angular 表单异步验证器仅在用户暂停/停止输入 1 秒左右时才向服务器发出请求。任何帮助将不胜感激。

【问题讨论】：

就像我一样，在 Angular 文档中很容易错过。异步验证器不包含在与同步验证器相同的参数中，它是一个单独的参数 - (angular.io/api/forms/FormGroup#constructor)

标签： angular rxjs

【解决方案1】：

您应该使用debounceTime 运算符而不是Observable.timer。

return this.userService.emailExists(control.value)
           .debounceTime(1000)
           .mapTo(exist => Observable.of({ "emailExists": exist }))
           .catch(err => Observable.of({ "emailExists": true }));

以下是DebounceTime的详细信息：

debounceTime 延迟源 Observable 发出的值，但 drops 如果新值到达源，则先前未决的延迟排放可观察。

【讨论】：