Angular 6 - 使用范围外的函数和回调函数[重复]

Question

我正在使用 DevExtreme 组件，这是在 html 中调用回调函数的地方：

<dxi-validation-rule type="custom"
     [validationCallback]="validationCallback"
     message="Email exists">
</dxi-validation-rule>

在ts文件中：

validationCallback (e)  {
  const x = this.userService.getUserByEmail(e.value);
  x.subscribe(ref => ref.email != null ? true : false);
  return x;
}

服务代码：

getUserByEmail(email: string): Observable<User> {
  return this.afs
    .collection<User>('users', ref => ref.where('email', '==', email))
    .snapshotChanges()
    .map(
      users => {
        const user = users[0];
        if (user) {
          const data = user.payload.doc.data() as User;
          const id = user.payload.doc.id;
          console.log('found: ' + data.email);
          return { id, ...data };
        } else {
          return null;
        }
      }
    );
}

该代码的问题是我得到了：

Cannot read property 'getUserByEmail' of undefined

基本上意味着我正在尝试访问超出函数范围的this.userService。在这种情况下，我如何能够访问外部函数来验证电子邮件？

Answer 1

可能是通过创建一个返回箭头函数的方法然后将getUserByEmail设置为该箭头函数的一种方法，这样您将获得对该对象的引用

public getUserByEmail;

ngOnInit() {
 this.getUserByEmail = getUserByEmailFactory();
}

getUserByEmailFactory() {

  return  (email: string) => {
    return this.afs
      .collection<User>('users', ref => ref.where('email', '==', email))
      .snapshotChanges()
      .map(
        users => {
          const user = users[0];
          if (user) {
            const data = user.payload.doc.data() as User;
            const id = user.payload.doc.id;
            console.log('found: ' + data.email);
            return { id, ...data };
          } else {
            return null;
          }
        }
      );
  }

}

您可以将afs 转换为getUserByEmailFactory，然后返回函数将有一个闭包，那么您将不再需要使用this

public getUserByEmailFactory(afs){
 ...
}

ngOnInit() {
  this.getUserByEmail = getUserByEmailFactory(this.afs);
}

也可以这样

public getUserByEmail = () => { ... }

arrow function ??