web应用程序 – Angular2 RC5 ngModule:没有NameService的提供
发布时间:2020-12-14 16:42:20 所属栏目:资源 来源:网络整理
导读:我对angular2服务有一点小问题. 我正在尝试使用ngModule提供程序选项提供服务,但是当我尝试将其添加到我的组件中时,我得到了:没有ServiceName的提供程序(此处为RankingService). app.module.ts import { NgModule } from '@angular/core'import { BrowserMo
我对angular2服务有一点小问题.
我正在尝试使用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配置错误,或者更确切地说没有设想管理那种情况:我创建了自己的包(Twinipix)但我的应用程序不包含Twinipix文件夹而是公共文件夹,这只是我的完美主义方面!因此,一切都完美无缺! (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
相关内容
- 微信小程序多列选择器range-key使用详解
- html – 在UL上使用:: before伪元素来创建时间线表示
- firefox下jquery iframe刷新页面提示会导致重复之前动作
- 表单 – 使用yesod-form进行POST / Redirect / GET后保持不
- .net – 以渐进格式保存JPG
- Web—12-详解CSS的相对定位和绝对定位
- JQuery页面图片切换和新闻列表滚动效果的具体实现
- 域名系统 – 邮件服务器和/或垃圾邮件过滤器是否关心域的根
- jQuery通过控制节点实现仅在前台通过get方法完成参数传递
- html – 文本与bootstrap的navbar-text pull-right无法正确