您如何将自定义服务注入另一个自定义服务? [英] How do you inject a custom service into another custom service?
问题描述
即使在 bootstrap(app, [providers]) 方法中引导 FirebaseService 后，我也收到 No Provider for FirebaseService 错误.
我遵循了 Pascal 的指南用于在服务中注入服务 并且当我在 HTTP_PROVIDERS 引导的情况下注入 Http 服务时它起作用了，但是我收到 No providers for FirebaseService 改成我自己的服务后报错.
我可以通过删除 FirebaseService 的注入来单独注入这两个提供程序就好了.即使我做 contructor(@Inject(FirebaseService) firebase: FirebaseService){} 它也不会工作，但我的理解是添加 @Injectable() 装饰器应该效果一样.
login-page.ts
import {Component} from '@angular/core';从../../Services/user.service"导入{UserService}；从../../services/firebase.service"导入 {FirebaseService}；从'../../export'导入{用户模型}；@成分({moduleId: 'app/PAGES/login-page/',选择器:'登录页面'，templateUrl: '登录页面.html',styleUrls: ['login-page.css'],提供者:[UserService]})导出类 LoginPage {构造函数(私有用户服务:用户服务){}用户:用户模型 = 新用户模型()；你好:string = "你有一个登录页面，先生";做东西() {控制台日志(this.user)；//this.userService.createUser(this.user);}}main.ts
import { bootstrap } from '@angular/platform-browser-dynamic';从 './app.component' 导入 { AppComponent };从 './SERVICES/firebase.service' 导入 { FirebaseService };引导程序(应用程序组件，[火力基地服务]);用户服务
import { Injectable, Inject } from '@angular/core';从 './firebase.service' 导入 {FirebaseService}；从'../export'导入{用户模型}；@Injectable()导出类 UserService {构造函数(私有 firebaseService:FirebaseService){}公共创建用户(用户:用户模型):任何{控制台日志(用户)；//this.firebaseService.set(user)}public getUser(用户名:字符串):任何{//return this.firebaseService.get("users/" + username);}}FirebaseService
@Injectable()导出类 FirebaseService {公共获取(路径:字符串):任何{控制台日志(路径)；}公共集(objectToSave:任何){控制台日志(objectToSave)；}}我做了 plunk 并且它正在工作并将 firebase 服务注入到用户服务中.
main.ts
import { bootstrap } from '@angular/platform-browser-dynamic';从'./app'导入{应用}；从 './firebase.service' 导入 { FirebaseService };引导程序(应用程序，[火力基地服务]);app.ts
//我们的根应用组件从@angular/core"导入 {Component}从 './user.service' 导入 {UserService}；@成分({选择器:'我的应用'，提供者:[UserService]，模板:`<div><h2>你好{{name}}</h2>`，指令:[]})出口类应用{构造函数(私有用户服务:用户服务){this.userService.createUser({h: 1});this.name = 'Angular2(发布候选！)'}}
user.service.ts
import { Injectable, Inject } from '@angular/core';从 './firebase.service' 导入 {FirebaseService}；从'../export'导入{用户模型}；@Injectable()导出类 UserService {构造函数(私有 firebaseService:FirebaseService){}公共创建用户(用户:用户模型):任何{console.log(this.firebaseService)控制台日志(用户)；//this.firebaseService.set(user)}public getUser(用户名:字符串):任何{//return this.firebaseService.get("users/" + username);}}firebase.service.ts
从 '@angular/core' 导入 {Injectable}@Injectable()导出类 FirebaseService {公共获取(路径:字符串):任何{控制台日志(路径)；}公共集(objectToSave:任何){控制台日志(objectToSave)；}}http://plnkr.co/edit/RLVT9dvfqH9W2BvE0qMG?p=preview
I'm getting a No Provider for FirebaseService error even after bootstrapping the FirebaseService in the bootstrap(app, [providers]) method.
I followed Pascal's guide for injecting a service within a service and it worked when I injected the Http service with the HTTP_PROVIDERS bootstrapped, but I receive a No providers for FirebaseService error after changing it to my own service.
I can inject both providers individually by removing the injection of the FirebaseService just fine.
Even if I do contructor(@Inject(FirebaseService) firebase: FirebaseService){} it won't work, but my understanding is that adding the @Injectable() decorator should have the same effect.
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);
}
}
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);
}
}
I made plunk and it's working and inject firebase service into users service.
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
这篇关于您如何将自定义服务注入另一个自定义服务?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
