如何将自定义服务注入另一个自定义服务？

Question

我得到一个No Provider for FirebaseService甚至自举后,错误FirebaseService的bootstrap(app, [providers])方法.

我按照Pascal的指南在服务中注入Http服务,当我使用HTTP_PROVIDERS引导程序注入服务时它工作,但是No providers for FirebaseService在将它更改为我自己的服务后收到错误.

我可以通过删除正常的注射来单独注射两个提供者FirebaseService.即使我这样做contructor(@Inject(FirebaseService) firebase: FirebaseService){}也行不通,但我的理解是添加@Injectable()装饰器应该具有相同的效果.

登录-page.ts

import {Component} from '@angular/core';
import {UserService} from '../../Services/user.service';
import {FirebaseService} from '../../services/firebase.service';
import {  UserModel } from '../../export';


@Component({
    moduleId: 'app/PAGES/login-page/',
    selector: 'login-page',
    templateUrl: 'login-page.html',
    styleUrls: ['login-page.css'],
    providers: [ UserService]
})
export class LoginPage {
    constructor(private userService: UserService) {}
    user:UserModel = new UserModel();
    hello: string = "You got yourself a login page, sir";

    dostuff() {

        console.log(this.user);
      //  this.userService.createUser(this.user);
    }
}

main.ts

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
import { FirebaseService } from './SERVICES/firebase.service';

bootstrap(AppComponent, [
     FirebaseService
]);

UserService

import { Injectable, Inject } from '@angular/core';
import {FirebaseService} from './firebase.service';
import { UserModel } from '../export';

@Injectable()
export class UserService {

    constructor(private firebaseService: FirebaseService ) {}

    public createUser(user: UserModel): any {
        console.log(user);
   //     this.firebaseService.set(user)
    }

    public getUser(username: string): any {
   //     return this.firebaseService.get("users/" + username);
    }
}

FirebaseService

@Injectable()
export class FirebaseService {

    public get(path: string): any {
      console.log(path);
    }

    public set(objectToSave: any) {
       console.log(objectToSave);
    }
}

Answer 1

我制作了 plunk，它正在工作，并将 firebase 服务注入到用户服务中。

主要.ts

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { App } from './app';
import { FirebaseService } from './firebase.service';

bootstrap(App, [
   FirebaseService
]);

应用程序.ts

//our root app component
import {Component} from '@angular/core'
import {UserService} from './user.service';

@Component({
  selector: 'my-app',
  providers: [UserService],
  template: `
    <div>
      <h2>Hello {{name}}</h2>

    </div>
  `,
  directives: []
})
export class App {
  constructor(private userService: UserService) {
    this.userService.createUser({h: 1});
    this.name = 'Angular2 (Release Candidate!)'
  }
}

用户服务.ts

import { Injectable, Inject } from '@angular/core';
import {FirebaseService} from './firebase.service';
import { UserModel } from '../export';

@Injectable()
export class UserService {

    constructor(private firebaseService: FirebaseService ) {}

    public createUser(user: UserModel): any {
      console.log(this.firebaseService)
      console.log(user);
   //     this.firebaseService.set(user)
    }

    public getUser(username: string): any {
   //     return this.firebaseService.get("users/" + username);
    }
}

firebase.service.ts

import {Injectable} from '@angular/core'
@Injectable()
export class FirebaseService {

    public get(path: string): any {
      console.log(path);
    }

    public set(objectToSave: any) {
       console.log(objectToSave);
    }
}

http://plnkr.co/edit/RLVT9dvfqH9W2BvE0qMG?p=preview