向Firebase和AngularFire2注册用户

use*_*902 3 observable firebase typescript angularfire2 angular

在我的app.component.ts中,我正在使用此功能通过angularFire2将用户注册到Firebase。但是我在类型“ void”上遇到“属性'subscribe'不存在”的错误。

register() {
    this.userService.registerUser(this.model)
        .subscribe(
            data => {
                console.log('Registration successful')
            },
            error => {
                this.loading = false;
            });
}
Run Code Online (Sandbox Code Playgroud)

在我的userService.ts中,我有以下调用从Firebase获取数据

registerUser(user: User) {
    this.angularFire.auth.createUser({
    email: user.email,
    password: user.password
    }).then(
    (success) => {
        console.log(success);
    }).catch(
    (err) => {
        console.log(err);
    })
}
Run Code Online (Sandbox Code Playgroud)

我知道为什么会出现错误。因为我在userService中的registerUse函数不会返回可观察到的结果。当我刚接触Typescript时,如何将其更改为可观察的状态,以便在数据返回时可以在app.component.ts中的console.log('Success')进行操作?

car*_*ant 5

最直接的选择是退还诺言:

import { FirebaseAuthState } from 'angularfire2';

registerUser(user: User): Promise<FirebaseAuthState> {
  return this.angularFire.auth.createUser({
    email: user.email,
    password: user.password
  })
  .then((authState: FirebaseAuthState) => {
    console.log(success);
    return authState;
  })
  .catch((error) => {
    console.log(error);
    throw error;
  });
}
Run Code Online (Sandbox Code Playgroud)

但是,您要返回一个可观察的对象,可以使用fromPromise

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/fromPromise';
import { FirebaseAuthState } from 'angularfire2';

registerUser(user: User): Observable<FirebaseAuthState> {
  return Observable.fromPromise(this.angularFire.auth.createUser({
    email: user.email,
    password: user.password
  })
  .then((authState: FirebaseAuthState) => {
    console.log(success);
    return authState;
  })
  .catch((error) => {
    console.log(error);
    throw error;
  }));
}
Run Code Online (Sandbox Code Playgroud)

如果要使用catchin registerUser记录错误,则应重新引发错误,以便调用者可以捕获并处理该错误。如果您不需要日志记录,只需将其保留,调用者就可以处理任何错误(通过可观察的):

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/fromPromise';
import { FirebaseAuthState } from 'angularfire2';

registerUser(user: User): Observable<FirebaseAuthState> {
  return Observable.fromPromise(this.angularFire.auth.createUser({
    email: user.email,
    password: user.password
  }));
}
Run Code Online (Sandbox Code Playgroud)

如果您不想返回AngularFire2的FirebaseAuthState,则可以使用a then返回其他内容作为promise的已解析值(这将是可观察对象发出的值)。