使用 AngularFire2 (Angular2 rc.5) 访问 firebase.storage() [英] Accessing firebase.storage() with AngularFire2 (Angular2 rc.5)

问题描述

我正在尝试访问我的项目中的 firebase.storage()，使用:

I am trying to access firebase.storage() on my project, with:

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

我找到了这个解决方案，并使用以下内容创建了我的 .component.ts 文件:>

I found this solution, and created my .component.ts file with:

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

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

and I get the following error in the browser console:

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

but, I initialised firebase in app.module.ts with this import

AngularFireModule.initializeApp(firebaseConfig)

我没有得到我错过的东西.如何使用 Firebase 访问存储?我用 angularfire2 访问数据库没有问题.
谢谢

I'm not getting what I'm missing. How can I access storage using firebase? I have no problem with accessing database with angularfire2.
Thanks

推荐答案

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

Internally, AngularFire2 calls Firebase's initializeApp in a DI factory when creating its FirebaseApp.

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

You are seeing the error because you are accessing the global firebase instance and initializeApp has not yet been called - as the DI infrastructure has not needed to create FirebaseApp or any of its dependencies.

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

Rather than using the global firebase, you could inject FirebaseApp (which is the value returned by Firebase's initializeApp function):

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

And, as it's no longer required, you could delete declare var firebase : any;.

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

Early versions of the Firebase NPM module did not include typings. Recent versions now include them, so the firebaseApp property could be strongly typed like this:

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 的第 4 版候选发布的重构，FirebaseApp 不再是令牌，因此可以简化注入:

---

With the refactoring that accompanied the version 4 release candidate of AngularFire2, FirebaseApp is no longer a token, so the injection can be simplified:

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 部分.(请注意，有一个关于存储支持的提案.)

However, an explicit import of firebase/storage is required because AngularFire2 now imports only the portions of the Firebase API that it uses. (Note that there is a proposal for storage support.)

这篇关于使用 AngularFire2 (Angular2 rc.5) 访问 firebase.storage()的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！