我对angular2服务有一点小问题.
我正在尝试使用ngModule提供程序选项提供服务,但是当我尝试将其添加到我的组件中时,我得到了:没有ServiceName的提供程序(此处为RankingService).
我正在尝试使用ngModule提供程序选项提供服务,但是当我尝试将其添加到我的组件中时,我得到了:没有ServiceName的提供程序(此处为RankingService).
app.module.ts
import { NgModule } from '@angular/core' import { BrowserModule } from '@angular/platform-browser' import { FormsModule } from '@angular/forms' import { HttpModule } from '@angular/http' /* * App component and routing */ import { AppComponent } from './components/app/app.component' import { routing } from './app.routes' /* * Services */ import { UserService } from './services/user.service' import { RankingService } from './services/ranking.service' /* * Global components */ import { HeaderComponent } from './components/header/header.component' import { FooterComponent } from './components/footer/footer.component' /* * App Components */ import { RankingComponent } from './components/ranking/ranking.component' import { OthersComponent } from './components/others/others.component' import { IpixsComponent } from './components/ipix/ipixs.component' import { IpixDetailsComponent } from './components/ipix/ipix-details/ipix-details.component' @NgModule({ imports: [ BrowserModule,FormsModule,HttpModule,routing ],declarations: [ AppComponent,HeaderComponent,FooterComponent,RankingComponent,OthersComponent,IpixsComponent,IpixDetailsComponent ],providers: [ UserService,RankingService ],exports: [ AppComponent ],bootstrap: [ AppComponent ] }) export class AppModule { }
ranking.service.ts
import { Injectable } from '@angular/core' /* * Entities */ import { RankingUser } from './../entities/ranking-user' @Injectable() export class RankingService { getRanking() { const users: RankingUser[] = [ { user: { picture : '',name: 'Edwige Chou' },correlation: 100 },{ user: { picture : '',name: 'Mathieu Vandeginste' },correlation: 78 },name: 'Isabelle Isa' },correlation: 51 },name: 'Julien Sergent' },correlation: 39 },name: 'Paul Raul' },correlation: 23 },name: 'Johnatan' },correlation: 17 } ] return users } }
ranking.component.ts
/* * Dependencies */ import { Component,OnInit } from '@angular/core' /* * Services */ import { RankingService } from './../../services/ranking.service' /* * Entities */ import { RankingUser } from './../../entities/ranking-user' @Component({ moduleId: module.id,selector: 'ranking',templateUrl: 'ranking.component.html',styleUrls: [ 'ranking.component.css' ] }) export class RankingComponent implements OnInit { ranking: RankingUser[] constructor( private rankingService: RankingService ) { } ngOnInit() { this.getRanking() } getRanking() { this.ranking = this.rankingService.getRanking() console.log( this.ranking ) } }
我看了很多次角度文档,但我没有看到问题,谢谢你的帮助;-)
编辑:当我直接在我的组件中提供服务时,它是有效的,只提供给应用程序模块.
编辑2:我解决了我的问题,这是我的systemjs配置是错误的,或者更确切地说没有设想管理那种情况:我创建了自己的包(Twinipix)但我的应用程序不包含Twinipix文件夹而是公开文件夹,所以问题来自jspm.config.js文件:
packages[ "Twinipix" ] = { main: "../public/main.js" };
我使用该配置进行更多的逻辑导入(导入整个应用程序而不是单个文件),这是我的完美主义者!
因此,使用更常见的systemjs配置,一切都完美无缺!