使用AngularFire2访问firebase.storage()(Angular2 rc.5)

发布时间：2020-12-17 07:40:43 所属栏目：安全来源：网络整理

导读：我尝试访问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';decla

我尝试访问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访问数据库没有问题.
谢谢

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

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

而不是使用全局firebase,您可以注入FirebaseApp(这是Firebase的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);
  }
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!