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

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() 装饰器应该具有相同的效果。

登录-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
]);

用户服务

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

您没有在 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，因此它也需要引导。

Answer 2

我制作了 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 3

我刚了解到导入语句路径区分大小写。

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

捂脸表情符号在哪里？

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

How do you inject a custom service into another custom service?

angular

angular2-services