使用AngularFire2（Angular2 rc.5）访问firebase.storage（）

我正在尝试访问项目中的firebase.storage（），方法是：

• “@angular”：“2.0.0-rc.5”
• “angularfire2”：“^2.0.0-beta.3-pre2”
• “firebase”：“^3.3.0”

我找到了该文件，并使用以下内容创建了.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);
  }
}

但是，我使用此导入在app.module.ts中初始化了firebase

AngularFireModule.initializeApp(firebaseConfig)

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

---

感谢

在内部，AngularFire2在创建其

FirebaseApp

时在DI工厂中调用Firebase的

initializeApp

您看到错误是因为您正在访问全局

firebase

实例，并且尚未调用

initializeApp

——因为DI基础设施不需要创建

FirebaseApp

或其任何依赖项

不使用全局

firebase

，您可以注入

FirebaseApp

（这是firebase的

initializeApp

函数返回的值）：

---

随着AngularFire2的发布，FirebaseApp的重构不再是令牌，因此注入可以简化：

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

从'@angular/core'导入{Component，Inject}；
从“angularfire2”导入{FirebaseApp}；
导入“firebase/storage”；
@组成部分({
模板：“”
})
导出类组件{
图像：字符串；
构造函数（firebaseApp:firebaseApp）{
const storageRef=firebaseApp.storage（）.ref（）.child（'images/image.png'）；
storageRef.getDownloadURL（）。然后（url=>this.image=url）；
}
}

---

但是，需要显式导入

firebase/storage

，因为AngularFire2现在只导入它使用的firebase API的部分。（请注意，有一个建议。）

上述代码不再有效，我不断得到“firebase.storage不是函数”，请尝试添加以下代码：

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

---

为什么我觉得这是下载Firebase SDK的最佳方式？哦，是的，因为它是！非常感谢，无论我走到哪里，每个人都说

declare var firebase:any但这不起作用。再次感谢你，这是金子。Thxst那代码对我来说不起作用。我不得不添加一个变量
fb:firebase.app.app到组件，在构造函数中，我将注入的
FirebaseApp
分配给它
constructor（@Inject（FirebaseApp）FirebaseApp:firebase.app.app）{this.fb=FirebaseApp；}
当然，然后每当我需要使用它时：
this.fb….
@adail.retamal如前所述，
FirebaseApp
是一个构造函数参数，只能在构造函数本身中使用。如果您想在构造函数之外使用它，有一个简单的替代方法：只需添加
public
或
private
，它将被声明为成员。例如
构造函数（@Inject（FirebaseApp）private FirebaseApp:firebase.app.app）
并且，在构造函数之外，使用
this.FirebaseApp
访问它@cartant你是对的！我这样做是因为我在Angular4上遇到编译错误。我已经卸载了（
npm uninstall firebase angularfire2--save
）并重新安装了（
npm install firebase angularfire2--save
）firebase和angularfire2，现在它可以像你说的那样工作了。谢谢
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);
  }
}

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

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