angular - 如何将服务注入(inject)异步验证器？

Question

我有两个非常相似的异步验证器。两者都检查值的唯一性:电子邮件和姓名缩写。第一个看起来像这样:

public static createEmailUniqueValidator(userService: UserService, originalEmailAddressFn: () => string) {
    return (control: AbstractControl): Observable<ValidationErrors> => {
        const originalEmailAddress: string = originalEmailAddressFn();
        if (originalEmailAddress && originalEmailAddress === control.value) {
            return Observable.of({});
        }
        return Observable.timer(1000).switchMap(() => {
            return userService
                .isEmailAddressUnique(control.value)
                .map(result => (result ? null : { 'This email address is already in use': true }));
        });
    }
}

第二个几乎相同，除了它在 userService 上调用的方法。 我如何创建一个通用验证器工厂并将它传递给它应该调用的方法来进行实际检查？

到目前为止，我有这个:

public static createValidator(uniqueFn: (value: string) => Observable<Boolean>, originalEmailAddressFn: () => string, errorMessage: string) {
        return (control: AbstractControl): Observable<ValidationErrors> => {
            const originalEmailAddress: string = originalEmailAddressFn();
            if (originalEmailAddress && originalEmailAddress === control.value) {
                return Observable.of({});
            }
            return Observable.timer(1000).switchMap(() => {
                return uniqueFn(control.value)
                    .map(result => (result ? null : { errorMessage: true }));
            });
        }
    }

但是我收到以下错误:

ERROR TypeError: Cannot read property 'restService' of undefined at webpackJsonp.../../../../../src/app/services/user/user.service.ts.UserService.isEmailAddressUnique (user.service.ts:108)

restService 是在userService 中注入(inject)的另一个服务。 看起来依赖关系还没有解决。我该如何解决这个问题？

这是我的用户服务:

// imports ...

@Injectable()
export class UserService {

  // [...]

  constructor(private restService: RestService) { }

  isEmailAddressUnique(emailAddress: string): Observable<Boolean> {
    return this.restService.get(this.usersUrl + '/validateUniqueEmailAddress/' + emailAddress);
  }
}

Answer 1

编辑:两者都误解了所需的功能数量，并且没有完全解释。花时间创建一个大致匹配您的设置的(稍微简化的)plunker(而不是尝试检查 API，它只是检查电子邮件是否有效，但作为 Observable 这样做；它还删除了 createValidator 的几个参数到专注于基本工厂)。

我创建了一个 working version 和一个 non-working version 。后者成功重现了您在运行时看到的错误 (Cannot read property 'restService' of undefined)。有关重大更改，请参阅 src/user.service.ts。我在下面进行了更新，以突出显示使用粗箭头声明以正确绑定(bind) this 很重要的两个函数。如果我在 plunk 中过度简化了某些内容，请告诉我，我们可以一起开发一个分支。

使用粗箭头声明的重要函数:

public static = createValidator(/*same parameters*/) => {
    // same content
}

和

public isEmailAddressUnique = (/*same parameters*/) => {
    // same content
}