使用 AngularFire2 访问 firebase.storage() (Angular2 rc.5)

Question

我正在尝试在我的项目中访问 firebase.storage()，其中：

"@angular": "2.0.0-rc.5"
"angularfire2": "^2.0.0-beta.3-pre2"
"firebase": "^3.3.0"

我找到了这个 solution，并创建了我的 .component.ts 文件：

import { Component } from '@angular/core';
declare var firebase : any;

@Component({
  template: '<img [src]="image">'
})
export class RecipesComponent {
  image: string;
  constructor() {
    const storageRef = firebase.storage().ref().child('images/image.png');
    storageRef.getDownloadURL().then(url => this.image = url);
  }
}

我在浏览器控制台中收到以下错误：

EXCEPTION: Error: Uncaught (in promise): EXCEPTION: Error in ./bstorageComponent class FBStorageComponent_Host - inline template:0:0
ORIGINAL EXCEPTION: Error: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp().
ORIGINAL STACKTRACE:
Error: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp().

但是，我在 app.module.ts 中用这个 import

初始化了 firebase

AngularFireModule.initializeApp(firebaseConfig)

我没有得到我所缺少的东西。如何使用 firebase 访问存储？我使用 angularfire2.
访问数据库没问题谢谢

Answer 1

在内部，AngularFire2 在创建 FirebaseApp.

时在 DI 工厂中调用 Firebase 的 initializeApp

您看到错误是因为您正在访问全局 firebase 实例并且 initializeApp 尚未被调用 - 因为 DI 基础结构不需要创建 FirebaseApp 或任何它的依赖项。

而不是使用全局 firebase，您可以注入 FirebaseApp（这是 Firebase 的 initializeApp 函数返回的值）：

import { Component, Inject } from '@angular/core';
import { FirebaseApp } from 'angularfire2';

@Component({
  template: '<img [src]="image">'
})
export class RecipesComponent {
  image: string;
  constructor(@Inject(FirebaseApp) firebaseApp: any) {
    const storageRef = firebaseApp.storage().ref().child('images/image.png');
    storageRef.getDownloadURL().then(url => this.image = url);
  }
}

而且，由于不再需要，您可以删除 declare var firebase : any;。

Firebase NPM 模块的早期版本不包含类型。最近的版本现在包括它们，所以 firebaseApp 属性可以像这样强类型化：

import { Component, Inject } from '@angular/core';
import { FirebaseApp } from 'angularfire2';
import * as firebase from 'firebase';

@Component({
  template: '<img [src]="image">'
})
export class RecipesComponent {
  image: string;
  constructor(@Inject(FirebaseApp) firebaseApp: firebase.app.App) {
    const storageRef = firebaseApp.storage().ref().child('images/image.png');
    storageRef.getDownloadURL().then(url => this.image = url);
  }
}

随着AngularFire2version 4 release candidate的重构，FirebaseApp不再是token，所以注入可以简化：

import { Component, Inject } from '@angular/core';
import { FirebaseApp } from 'angularfire2';
import 'firebase/storage';

@Component({
  template: '<img [src]="image">'
})
export class RecipesComponent {
  image: string;
  constructor(firebaseApp: FirebaseApp) {
    const storageRef = firebaseApp.storage().ref().child('images/image.png');
    storageRef.getDownloadURL().then(url => this.image = url);
  }
}

但是，需要显式导入 firebase/storage，因为 AngularFire2 现在仅导入它使用的 Firebase API 部分。（请注意，有 storage support 的提议。）

Answer 2

上面的代码不再有效，我不断得到'firebase.storage is not a function'，尝试添加以下代码：

import * as firebase from 'firebase/app';
import 'firebase/storage';

使用 AngularFire2 访问 firebase.storage() (Angular2 rc.5)

Accessing firebase.storage() with AngularFire2 (Angular2 rc.5)

firebase

firebase-storage

angularfire2

angular