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

Question

即使在 bootstrap(app, [providers]) 方法中引导 FirebaseService 之后，我也会收到 No Provider for FirebaseService 错误。

我关注了Pascal's guide for injecting a service within a service，当我用HTTP_PROVIDERS 引导注入Http 服务时它工作了，但是在将其更改为我自己的服务后我收到No providers for FirebaseService 错误。

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

login-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);
    }
}

ma​​in.ts

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

bootstrap(AppComponent, [
     FirebaseService
]);

用户服务

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 服务注入用户服务。

main.ts

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

bootstrap(App, [
   FirebaseService
]);

app.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!)'
  }
}

user.service.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

Answer 2

我刚刚了解到 import 语句路径是区分大小写的。

我有import {UserService} from '../../services/user.service';，而目录是../../SERVICES/user.service。

掌心表情符号在哪里？

Answer 3

您没有在main.ts 中插入UserService。尝试添加这个：

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { PLATFORM_DIRECTIVES, provide } from '@angular/core';
import { AppComponent } from './app.component';
import { ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router';
import { UxButton, UxText } from './export';
import { FirebaseService } from './SERVICES/firebase.service';
import { UserService } from './SERVICES/user.service';

bootstrap(AppComponent, [
     FirebaseService,
     UserService     //<-- add this
    ,ROUTER_DIRECTIVES 
    ,ROUTER_PROVIDERS
    ,provide(PLATFORM_DIRECTIVES, {useValue: UxButton, multi: true})
    ,provide(PLATFORM_DIRECTIVES, {useValue: UxText, multi: true})
]);

您的login-page.ts 页面依赖于UserService，因此它也需要进行引导。