Question

我正在开发一个Angular2应用程序，我正在尝试将一个服务注入一个类。我四处搜索，发现我需要使用ReflectiveInjector类，但我的问题是我仍然对该服务的FirebaseRef部分没有提供程序错误。

我已经在这几天工作了，没有哪里可以找到解决我问题的解决方案。其中一个答案提到必须处理声明的依赖性，但从未给出如何做到这一点的答案。任何帮助，将不胜感激。感谢。

堆栈跟踪

EXCEPTION: Uncaught (in promise): Error: No provider for Token FirebaseApp! (ImageUploadService -> Token FirebaseApp)
Error: No provider for Token FirebaseApp! (ImageUploadService -> Token FirebaseApp)
at NoProviderError.BaseError [as constructor] (http://localhost:4200/main.bundle.js:6124:27)
at NoProviderError.AbstractProviderError [as constructor] (http://localhost:4200/main.bundle.js:59490:16)
at new NoProviderError (http://localhost:4200/main.bundle.js:59552:16)
at ReflectiveInjector_._throwOrNull (http://localhost:4200/main.bundle.js:82140:19)
at ReflectiveInjector_._getByKeyDefault (http://localhost:4200/main.bundle.js:82179:25)
at ReflectiveInjector_._getByKey (http://localhost:4200/main.bundle.js:82126:25)
at ReflectiveInjector_._getByReflectiveDependency (http://localhost:4200/main.bundle.js:82109:21)
at ReflectiveInjector_._instantiate (http://localhost:4200/main.bundle.js:82001:36)
at ReflectiveInjector_._instantiateProvider (http://localhost:4200/main.bundle.js:81968:25)

图像上载服务

import { Injectable, Inject } from '@angular/core';

import { FirebaseRef } from 'angularfire2';

@Injectable()
export class ImageUploadService {

 constructor(@Inject(FirebaseRef) public fb) { }

  uploadFile(file: File): any {
  var storage = this.fb.storage().ref().child("image.png");


  return storage;
}

testService() {
  console.log("service injector worked!!");
}

}

FileUploader.ts

import { ReflectiveInjector, Inject } from '@angular/core';

import { ImageWrap } from './ImageWrap';
import { ImageUploadService } from '../../services/image-upload.service';
import { FirebaseRef, FIREBASE_PROVIDERS } from 'angularfire2';

export class FileUploader {
  private queue:Array<ImageWrap> = [];
  private uploadService:ImageUploadService;

  public constructor() {
    let injector = ReflectiveInjector.resolveAndCreate([
     {provide: ImageUploadService, useClass: ImageUploadService}
    ]);
    this.uploadService = injector.resolveAndInstantiate([ImageUploadService]);
  }

  public addToQueue(files:File[]) {
    for(let file of files) {
     let tempName = file.name.replace(/\s+/g, '-');
     this.queue.push(new ImageWrap(file, tempName));
    }
   for( let image of this.queue) {
     console.log("image name " + image.name);
   }
    // this.uploadService.testService();

  }

  public uploadFile(file:ImageWrap) {

  }
}

Answer 1

向组件添加service已过时syntax。您不再在组件中添加提供商。

但您需要将decorator添加到component，将provider添加到 app.module.ts 中的正确位置

component内的

应如下所示，

@Component({
        templateUrl: './path/to/file-uploader.component.html'
    })

export class FileUploader { ...

如果您不想将该文件作为自己的html文件，那么您可以直接在html中添加template paramater。这看起来像这样，

  @Component({
             template: `
                    <h2> This goes in here. It is important to format this correctly having the ticks on the top and bottom line.</h2>
                    `
        })

    export class FileUploader { ...

然后您必须将您创建的新service添加到providers array。您可以在 app.module.ts

中执行此操作

示例

//导入服务文件

import { NameOfServiceExport } from './services/PATH/TO/SERVICE/SERVICE_NAME_HERE.service';

//将服务添加到providers数组

@NgModule({ declarations: [ AppComponent, PublicComponent, ], imports: [ BrowserModule, ], providers: [ SERVICE_NAME_HERE, ], bootstrap: [AppComponent] }) export class AppModule { }

Answer 2

您在“FileUploader.ts”

中缺少@Component装饰器

import { ReflectiveInjector, Inject } from '@angular/core';

import { ImageWrap } from './ImageWrap';
import { ImageUploadService } from '../../services/image-upload.service';
import { FirebaseRef, FIREBASE_PROVIDERS } from 'angularfire2';


@Component({
        selector: 'file-uploader',
        templateUrl: "your template here",
        styleUrls: "your css file here",
        providers: [FIREBASE_PROVIDERS] // <== you need to add firebase provider here.
    })

export class FileUploader {
  private queue:Array<ImageWrap> = [];
  private uploadService:ImageUploadService;

  public constructor() {
    let injector = ReflectiveInjector.resolveAndCreate([
     {provide: ImageUploadService, useClass: ImageUploadService}
    ]);
    this.uploadService = injector.resolveAndInstantiate([ImageUploadService]);
  }

  public addToQueue(files:File[]) {
    for(let file of files) {
     let tempName = file.name.replace(/\s+/g, '-');
     this.queue.push(new ImageWrap(file, tempName));
    }
   for( let image of this.queue) {
     console.log("image name " + image.name);
   }
    // this.uploadService.testService();

  }

  public uploadFile(file:ImageWrap) {

  }
}

Angular2将服务注入Class错误

2 个答案: