Question

我搜索了这个问题，但没有找到，并尝试了很多来解决这个问题，但我是角度2的新手，并在角度文档的帮助下创建了演示应用程序。我的应用程序在一段时间之前成功运行。但是当我添加新服务时，我得到了这个例外：

EXCEPTION：没有HeroService的提供者！

我确定我在某个地方做错了，有谁能告诉我我做错了什么？

文件夹结构：

app
    app.component.ts
    app.module.ts
    hero.service.ts
    hero.ts
    hero-detail.component.ts
    main.ts
    mock-hero.ts
node_modules ...
index.html
package.json
styles.css
systemjs.config.js
tsconfig.json

app.component.ts -

//app.component.ts
import { Component, OnInit } from '@angular/core';
import { Hero } from './hero';
import { HeroService } from './hero.service';
@Component({
  selector: 'my-app',
  template: `
    <h1>{{title}}</h1>
       <h2>My Heroes</h2>
    <ul class="heroes">
        <li *ngFor="let hero of heroes"
              [class.selected]="hero === selectedHero"
              (click)="onSelect(hero)">
           <span class="badge">{{hero.id}}</span> {{hero.name}}
       </li>
    </ul>
    <my-hero-detail [hero]="selectedHero"></my-hero-detail>`,
})

export class AppComponent implements OnInit {
  title = 'Tour of Heroes';
  heroes: Hero[];
  selectedHero: Hero;

  constructor(private heroService: HeroService) { }

  getHeroes(): void {
    this.heroService.getHeroes().then(heroes => this.heroes = heroes);
  }

  ngOnInit(): void {
    this.getHeroes();
  }

  onSelect(hero: Hero): void {
    this.selectedHero = hero;
  }
}

hero.service.ts -

// hero.service.ts

import { Injectable } from '@angular/core';
import { Hero } from './hero';
import { HEROES } from './mock-heroes';
@Injectable()
export class HeroService {
  getHeroes(): Promise<Hero[]> {
    return Promise.resolve(HEROES);
  };
getHeroesSlowly(): Promise<Hero[]> {
  return new Promise(resolve => {
    // Simulate server latency with 2 second delay
    setTimeout(() => resolve(this.getHeroes()), 2000);
  });
}
}

hero.ts -

//hero.ts
export class Hero {
  id: number;
  name: string;
}

模拟heroes.ts -

//mock-heroes.ts
import { Hero } from './hero';

export const HEROES: Hero[] = [
  {id: 11, name: 'Mr. Nice'},
  {id: 12, name: 'Narco'},
  {id: 13, name: 'Bombasto'},
  {id: 14, name: 'Celeritas'},
  {id: 15, name: 'Magneta'},
  {id: 16, name: 'RubberMan'},
  {id: 17, name: 'Dynama'},
  {id: 18, name: 'Dr IQ'},
  {id: 19, name: 'Magma'},
  {id: 20, name: 'Tornado'}
];

app.module.ts -

//app.module.ts
import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {FormsModule} from '@angular/forms'

import { AppComponent }  from './app.component';
import { MyComponent }  from './my.component';
import { ShubhComponent }  from './my.component';

import { HeroDetailComponent } from './hero-detail.component';


@NgModule({
  imports:      [ BrowserModule,FormsModule ],
  declarations: [ AppComponent ,MyComponent,HeroDetailComponent,ShubhComponent],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

为了更好地理解我附加快照：

Answer 1

尝试这样的事情

 @Component({
      selector: 'my-app',
      providers: [Your Service Name],
      template: `
        <h1>{{title}}</h1>
           <h2>My Heroes</h2>
        <ul class="heroes">
            <li *ngFor="let hero of heroes"
                  [class.selected]="hero === selectedHero"
                  (click)="onSelect(hero)">
               <span class="badge">{{hero.id}}</span> {{hero.name}}
           </li>
        </ul>
        <my-hero-detail [hero]="selectedHero"></my-hero-detail>`,
    })

Answer 2

您必须在加载使用它的组件的模块中提供服务。在您的情况下，将其加载到提供者数组的app.module中。

Answer 3

您需要在@NgModule的提供程序部分声明您的服务：

{{1}}

以下是NgModule的文档：https://angular.io/docs/ts/latest/guide/ngmodule.html

Answer 4

您需要在

中的提供者数组中声明您的服务

app.module.ts（如果您希望服务作为整个应用的单身人士）

  @NgModule({
  imports:      [ BrowserModule,FormsModule ],
  declarations: [ AppComponent ,MyComponent,HeroDetailComponent,ShubhComponent],
  bootstrap:    [ AppComponent ],
  providers: [HeroService]
})
export class AppModule { }

或

（如果您只想为组件提供服务）。

@Component（{ 选择器：'my-app'，模板：<h1>{{title}}</h1> <h2>My Heroes</h2> <ul class="heroes"> <li *ngFor="let hero of heroes" [class.selected]="hero === selectedHero" (click)="onSelect(hero)"> <span class="badge">{{hero.id}}</span> {{hero.name}} </li> </ul> <my-hero-detail [hero]="selectedHero"></my-hero-detail>，提供者：[HeroService] }）

Answer 5

在您的组件中添加providers: [Service Name]。

 @Component({
      selector: 'my-app',
      providers: [Service Name],
     ...............
    ................

    })

Answer 6

在app.module上将服务添加为提供者

例外：没有HeroService的提供者？

6 个答案: