Как получить доступ к собственному объекту Firebase при использовании angularfire2?

Я использую AngularFire2 (2.0.0-beta.2) с помощью angular2 (2.0.0-rc.4). Я хотел бы получить доступ к собственному объекту firebase (а не к корневому объекту AngularFire) из Angularfire2.

В моем компоненте я хочу сделать такие вызовы, как:

firebase.auth().currentUser.updateEmail("[email protected]")

где firebase - это родной объект firebase, который вы получаете из фрагмента ниже:

<script src="https://www.gstatic.com/firebasejs/3.1.0/firebase.js"></script>
  <script>
    // Initialize Firebase
    // TODO: Replace with your project 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.

Ответы

Ответ 1

Я попытаюсь ответить на свой вопрос. Позвольте мне сначала сказать, что я уверен, что мой ответ не самый изящный вариант, я еще не эксперт javascript/ typescript/angular. Но мой ответ действительно работает, даже если я не совсем понимаю.

Я использовал angular -cli для настройки моего проекта, который основан на angular2 и последней Firebase. По-видимому, когда вы используете это для настройки своего проекта, существует глобальный объект, созданный с именем "firebase". Один из способов сделать его видимым в вашем компоненте angular 2 - это разместить это объявление на глобальном уровне в вашем компоненте (сразу после операторов импорта и перед объявлением класса).

declare var firebase : any;

После этого глобальный объект firebase доступен для использования в вашем компоненте.

Ответ 2

Если вы читаете это в сентябре 2016 года, этот подход может показаться вам приятным.

Смотрите код для лучшего понимания:

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 = '[email protected]';
  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
  • Сделать доступным в вашем компоненте
  • Начните использовать все встроенные функции и методы SDK для javascript, например sendPasswordResetEmail()

Выполнение auth. не автозаполняется доступными методами и функциями, поэтому вам могут потребоваться документы рядом с вами, например: https://firebase.google.com/docs/auth/web/manage-users

Любое спасибо? Дайте @cartant: fooobar.com/questions/279594/...

Ответ 3

Решение RanchoSoftware не работает для меня, я использовал

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

внутри импорта в файле app.module.ts

найдено здесь: https://github.com/angular/angularfire2/issues/445