向 Firebase 和 AngularFire2 注册用户

Posted 2023-03-13

【中文标题】向 Firebase 和 AngularFire2 注册用户

【英文标题】：Register User with Firebase and AngularFire2

【发布时间】：2017-06-07 01:15:56

【问题描述】：

在我的 app.component.ts 中，我使用此函数使用 angularFire2 将用户注册到 Firebase。但是，我收到一个错误，“属性'订阅'不存在于类型'void”上。

register() 
    this.userService.registerUser(this.model)
        .subscribe(
            data => 
                console.log('Registration successful')
            ,
            error => 
                this.loading = false;
            );

在我的 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);
    )

我明白为什么会出现错误。因为我在 userService 中的 registerUse 函数不返回一个可观察的。由于我是打字稿的新手，如何将其更改为可观察的，以便在数据返回时可以在 app.component.ts 中使用 console.log('Success')？

【参考方案1】：

最直接的选择是返回承诺：

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;
  );

但是，如果你想返回一个 observable，你可以使用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;
  ));

如果您打算在registerUser 中使用catch 来记录错误，您应该重新抛出错误，以便调用者可以捕获和处理它。如果您不需要日志记录，只需将其保留，调用者就可以处理任何错误（通过可观察对象）：

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
  ));

如果你不想返回 AngularFire2 的 FirebaseAuthState，你可以使用 then 返回其他东西作为 promise 的解析值（这将是 observable 发出的值）。

【讨论】：

感谢卡坦特。我在 .then((user: firebase.User) 类型的参数 (user: User) => user is notassignable to parameter of type '(a:FirebaseAuthState)=> any' 处收到错误。

它应该被修复。在 Firebase SDK 和 AngularFire2 之间来回切换有时会让人感到困惑。

你会推荐哪一个？ SDK 还是 AngularFire2？在我看来，实际的 SDK 上有更多文档吗？

两者。 AngularFire2 有很好的列表和对象绑定，但没有涵盖完整的 API。但是，没有理由不能同时使用两者。 AngularFire2 的 observables 非常适合 Angular 2 - 用于列表、对象和身份验证。

是的。我认为最终使用哪个承诺取决于包含库和 polyfill 等的顺序。很高兴你有它的工作。