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

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

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

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 видимый внутри него. Возможно, это очень простая задача, но я не знаю, как ее решить-я не специалист по углам. Я надеялся, что будет и AngularFire api, чтобы получить объект, но его нет.

кроме того, причина, по которой я пытаюсь это сделать, заключается в том, что я не думаю, что api angularfire2 еще полны (это понятно, поскольку он все еще находится в бета-версии), и я пытаюсь обойти это. Например, я хочу обновить адрес электронной почты или пароль пользователей или отправить им забытый пароль электронной почты. Ни одна из этих функций, похоже, еще не существует в AngularFire2, поэтому я пытаюсь реализовать с помощью собственного объекта Firebase.

12
angularfire2 firebase firebase-authentication

3 ответов

если Вы читаете это в сентябре 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 = '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

8

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

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

declare var firebase : any;

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

6

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

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

в пределах импорта в приложении.модуль.файл TS

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

6