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

问题描述

我尝试在我的项目中访问firebase.storage（），它包含：

• @ angular ：2.0.0-rc.5


• angularfire2：^ 2.0.0-beta.3-pre2
  
• firebase：^ 3.3.0

我发现这个解决方案，并创建我的.component.ts文件：

 从'@ angular / core'导入{Component}; 
 declare var firebase：any; 
 
 @Component（{
 template：'< img [src] =image>'
}）
导出类RecipesComponent {
 image：string; 
 constructor（）{
 const storageRef = firebase.storage（）。ref（）。child（'images / image.png'）; 
 storageRef.getDownloadURL（）。then（url => this.image = url）; 
 
 
 
 
 
 
 
我得到这个错误（在浏览器控制台中）：  
 
 
  EXCEPTION：错误：未捕获（在promise中）：EXCEPTION：./bstorageComponent类中的错误FBStorageComponent_Host  - 内联模板：0：0 
原始异常：错误：未创建Firebase应用[DEFAULT] - 调用Firebase App.initializeApp（）。 
原始堆栈：
错误：未创建Firebase应用[DEFAULT] - 调用Firebase App.initializeApp（）。 
  
但是，我在app.module.ts中使用此导入初始化了firebase  
 
  AngularFireModule.initializeApp（firebaseConfig）
  
 
 
 <我不能得到我错在哪里，如何使用Firebase访问存储。我在使用angularfire2访问数据库时没有任何问题。
 
谢谢  
 
解决方案
在内部，AngularFire2调用Firebase的<$在创建其 FirebaseApp 时，在工厂中创建c $ c> initializeApp 。由于您正在访问全局的 firebase 实例并且还没有调用 initializeApp 作为DI基础结构不需要创建 FirebaseApp 或其任何依赖项。
 
 
 
而不是使用全局 firebase ，您可以注入 FirebaseApp （这是Firebase的 initializeApp 函数返回的值）： 
 
 pre $ 从'@ angular / core'导入{Component，Inject}; 
从'angularfire2'导入{FirebaseApp}; 
 
 @Component（{
 template：'< img [src] =image>'
}）
导出类RecipesComponent {
 image：string; 
构造函数（@Inject（FirebaseApp）firebaseApp：any）{
 const storageRef = firebaseApp.storage（）。ref（）。child（'images / image.png'）; 
 storageRef.getDownloadURL（）。then（url => this.image = url）; 
 
 
 
 
 
 
 $ b 
由于不再需要，你可以删除 declare var firebase：any; 。
 
 
 
 
 
 
早期版本Firebase NPM模块不包括类型。最近的版本现在包含它们，所以 firebaseApp 属性可以像这样强类型化： 
 
 
 从{@ angular / core'导入{Component，Inject}; 
从'angularfire2'导入{FirebaseApp}; 
从'firebase'导入*作为firebase; 
 
 @Component（{
 template：'< img [src] =image>'
}）
导出类RecipesComponent {
 image：string; 
构造函数（@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 不再是一个标记，因此可以简化注入： 
 
 
  import {Component，Inject } from @ angular / core'; 
从'angularfire2'导入{FirebaseApp}; 
导入firebase / storage; 
 
 @Component（{
 template：'< img [src] =image>'
}）
导出类RecipesComponent {
 image：string; 
构造函数（firebaseApp：FirebaseApp）{
 const storageRef = firebaseApp.storage（）。ref（）。child（'images / image.png'）; 
 storageRef.getDownloadURL（）。then（url => this.image = url）; 
 
 
 
 
 
 
 $ p $但是，显式导入 firebase / storage 是必需的，因为AngularFire2现在只导入它使用的Firebase API部分。 （请注意，有关存储支持的建议。）
 


I try 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"


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 this error (in 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().
but, I initialised firebase in app.module.ts with this import
AngularFireModule.initializeApp(firebaseConfig)
I can't get where I'm wrong and how can I access storage using firebase. I have no problem with accessing database with angularfire2.

Thanks
解决方案
Internally, AngularFire2 calls Firebase's initializeApp in a DI factory when creating its 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.

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);
  }
}
And, as it's no longer required, you could delete declare var firebase : any;.



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




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);
  }
}
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访问firebase.storage（）（Angular2 rc.5）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！