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

Posted 2023-02-19

【中文标题】使用 AngularFire2 (Angular2 rc.5) 访问 firebase.storage()

【英文标题】：Accessing firebase.storage() with AngularFire2 (Angular2 rc.5)

【发布时间】：2016-12-28 07:32:31

【问题描述】：

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

“@angular”：“2.0.0-rc.5” “angularfire2”：“^2.0.0-beta.3-pre2” “火力基地”：“^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 中初始化了 firebase

AngularFireModule.initializeApp(firebaseConfig)

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

【参考方案1】：

在内部，AngularFire2 在创建 FirebaseApp 时在 DI 工厂中调用 Firebase 的 initializeApp。

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

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

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);
  

---

随着AngularFire2的version 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的提议。）

【讨论】：

为什么我觉得这是下拉到 Firebase SDK 的最佳方式？哦，是的，因为它是！非常感谢，无论我走到哪里，每个人都说declare var firebase: any;，但这不起作用。再次感谢您。

这是金子。谢谢

该代码对我不起作用。我必须在组件中添加一个变量fb: firebase.app.App;，并在构造函数中将注入的FirebaseApp 分配给它。 constructor(@Inject(FirebaseApp) firebaseApp: firebase.app.App) this.fb = firebaseApp; 当然可以，以后需要用到的时候：this.fb....

@adail.retamal 正如所写，firebaseApp 是一个构造函数参数，只能在构造函数本身中使用。如果你想在构造函数之外使用它，有一个简洁的替代方案：只需添加public 或private，它将被声明为成员。例如。 constructor(@Inject(FirebaseApp) private firebaseApp: firebase.app.App) 并在构造函数之外使用 this.firebaseApp 访问它。

@cartant 你是对的！我这样做是因为我在 Angular4 上遇到编译错误。我已经卸载（npm uninstall firebase angularfire2 --save）并重新安装（npm install firebase angularfire2 --save）firebase 和 angularfire2，现在它可以按照你说的那样工作。谢谢！

【参考方案2】：

上面的代码不再起作用，我不断收到'firebase.storage is not a function'，尝试添加以下代码：

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