使用 angularfire2 时如何访问本机 Firebase 对象？答案

【问题标题】：How to get access to native Firebase object when using angularfire2?使用 angularfire2 时如何访问本机 Firebase 对象？
【发布时间】：2016-11-13 15:08:22
【问题描述】：

我将 AngularFire2 (2.0.0-beta.2) 与 angular2 (2.0.0-rc.4) 结合使用。我想从 Angularfire2 访问本机 firebase 对象（不是 AngularFire 根对象）。

在我的组件中，我想进行如下调用：

firebase.auth().currentUser.updateEmail("user@example.com")

其中 firebase 是本机 firebase 对象，就像您从下面的片段中获得的那样：

<script src="https://www.gstatic.com/firebasejs/3.1.0/firebase.js"></script>
  <script>
    // Initialize Firebase
    // TODO: Replace with your project's customized code snippet
    var config = {
      apiKey: "apiKey",
      authDomain: "projectId.firebaseapp.com",
      databaseURL: "https://databaseName.firebaseio.com",
      storageBucket: "bucket.appspot.com",
    };
    firebase.initializeApp(config);
  </script>

但我不明白如何设置我的 angular2 组件以使 firebase 对象在其中可见。可能是一个非常简单的问题要解决，但我不知道如何解决——我不是 angular2 专家。我希望有 AngularFire api 来获取对象，但没有。

另外，我尝试这样做的原因是我认为 angularfire2 api 还不完整（这是可以理解的，因为它仍处于测试阶段）并且我正在尝试解决这个问题。例如，我想更新用户的电子邮件地址或密码，或者向他们发送忘记密码的电子邮件。 AngularFire2 中似乎还没有这些功能，所以我正在尝试使用本机 Firebase 对象来实现。

【问题讨论】：

AngularFire 用于获取对象 ($firebaseObject) 和数组 ($firebaseArray) 等三向绑定。您将使用常规 Firebase 进行身份验证和其他功能
如果 AngularFire 中尚未包含某些内容，您可以使用常规的底层 Firebase JavaScript SDK。请参阅firebase.google.com/docs/auth/web/manage-users 如果您在工作时遇到问题，请发布向我们展示您遇到问题的最少代码。

标签： firebase firebase-authentication angularfire2

【解决方案1】：

如果您从 2016 年 9 月开始阅读本文，那么这种方法对您来说可能听起来不错。

查看代码以获得更好的理解：

import { Component, Inject } from '@angular/core';
import { AngularFire, FirebaseApp } from 'angularfire2';
    
@Component({
  templateUrl: 'app/auth/resetpassword.component.html'
})
    
export class ResetpassComponent {
  public auth: any;
  constructor(private af: AngularFire, @Inject(FirebaseApp) firebaseApp: any) {
    this.auth = firebaseApp.auth()
    console.log(this.auth);
  }
    
  // formData.value.email = 'your@email.com';
  onSubmit(formData) {
     if(formData.valid) {
       console.log('Sending email verification');
       this.auth.sendPasswordResetEmail(formData.value.email)
         .then( (response) => {
           console.log('Sent successfully');
         })
         .catch( (error) => {
           console.log(error);
         })
     }
  }
}

英文：

导入Inject 和FirebaseApp
在您的组件中可用
开始使用所有原生javascript SDK函数和方法，如sendPasswordResetEmail()

auth. 不会自动完成可用的方法和功能，因此您可能需要附近的文档，例如：https://firebase.google.com/docs/auth/web/manage-users

谢谢？给@cartant：https://stackoverflow.com/a/39069813/1757321

【讨论】：

【解决方案2】：

RanchoSoftware 的解决方案不适合我，我用过

import {AngularFireModule} from "angularfire2";
import *as firebase from 'firebase';

在 app.module.ts 文件的导入中

在这里找到： https://github.com/angular/angularfire2/issues/445

【讨论】：

【解决方案3】：

我将尝试回答我自己的问题。首先让我说我确定我的答案不是最优雅的解决方案，我还不是 javascript/typescript/angular 专家。但我的回答确实有效——即使我不完全理解。

我使用 angular-cli 来设置我的项目，该项目基于 angular2 和最新的 firebase。显然，当您使用它来设置项目时，会创建一个名为“firebase”的全局对象。使其在 Angular 2 组件中可见的一种方法是将此声明放在组件中的全局级别（在 import 语句之后和类声明之前）。

declare var firebase : any;

完成此操作后，全局 firebase 对象即可在您的组件中使用。

【讨论】：

您的解决方案有效，并且只有一行代码。对我来说似乎很优雅;-)