Question

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

我关注了Pascal's guide for injecting a service within a service，当我将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服务注入用户服务。

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。

facepalm表情符号在哪里？

Answer 3

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

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

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

3 个答案: