12

私は 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>

しかし、firebase オブジェクトがその中に表示されるように angular2 コンポーネントをセットアップする方法がわかりません。おそらく解決するのは非常に簡単な問題ですが、解決方法がわかりません - 私は angular2 の専門家ではありません。オブジェクトを取得するためのAngularFire APIがあることを望んでいましたが、ありません。

また、私がこれをやろうとしている理由は、angularfire2 api がまだ完成していないと思うからです (まだベータ版なので理解できます)。これを回避しようとしています。たとえば、ユーザーのメール アドレスまたはパスワードを更新したり、忘れたパスワードのメールを送信したりします。この機能はいずれも AngularFire2 にはまだ存在しないようです。そのため、ネイティブの Firebase オブジェクトを使用して実装しようとしています。

4

3 に答える 3

8

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

于 2016-10-05T09:52:46.857 に答える
5

RanchoSoftware のソリューションはうまくいきませんでした。

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

app.module.ts ファイルのインポート内

ここにあります： https://github.com/angular/angularfire2/issues/445

于 2016-09-20T14:12:31.897 に答える
5

私は自分自身の質問に答えようとします。最初に、私の答えが最もエレガントなソリューションではないと確信していることを言わせてください。私はまだjavascript/typescript/angularの専門家ではありません。しかし、完全に理解していなくても、私の答えはうまくいきます。

angular-cli を使用して、angular2 と最新の firebase に基づくプロジェクトをセットアップしました。これを使用してプロジェクトをセットアップすると、「firebase」という名前で作成されたグローバル オブジェクトが存在するようです。angular 2 コンポーネント内で表示できるようにする 1 つの方法は、この宣言をコンポーネントのグローバル レベル (インポート ステートメントの直後、クラス宣言の前) に配置することです。

declare var firebase : any;

これを行うと、コンポーネントでグローバル firebase オブジェクトを使用できるようになります。

于 2016-07-21T22:09:08.283 に答える