21


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

  • “@angular”：“2.0.0-rc.5”
  • “angularfire2”：“^2.0.0-beta.3-pre2”
  • “火力基地”：“^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);
  }
}

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

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 访问数据库没有问题。
谢谢

4

2 回答 2

57

在内部，AngularFire2initializeApp在创建FirebaseApp.

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

firebase您可以注入FirebaseApp（这是 Firebase 函数返回的值），而不是使用 global 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版本 4 候选版本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。（请注意，有一个关于存储支持的提案。）

于 2016-08-21T23:46:53.900 回答
11

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

import * as firebase from 'firebase/app';
import 'firebase/storage';
于 2017-06-07T17:17:12.760 回答