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中初始化了firebase

AngularFireModule.initializeApp(firebaseConfig)

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

Answer 1

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

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

您可以注入firebase（这是Firebase的FirebaseApp函数返回的值），而不是使用全局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);
  }
}

通过伴随AngularFire2的version 4 release candidate的重构，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);
  }
}

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

Answer 2

上面的代码不再有效，我一直得到＆＃39; firebase.storage不是函数＆＃39;，请尝试添加以下代码：

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

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

2 个答案: