Angular 2中的app.module.ts中的Providers数组

时间:2017-02-09 12:22:36

标签: angular ng-modules

这可能只是一个微不足道的问题,但我需要澄清疑虑。

我正在关注教程https://angular.io/docs/ts/latest/tutorial/toh-pt5.html,突然间它让我感到困惑。

在我的 hero.component.js

我有

import { Component } from '@angular/core';
import { Hero } from './hero';
import { OnInit } from '@angular/core';

@Component({
  selector: 'my-heroes',
  template:`
            <h2>My Heroes</h2>
            <ul class="heroes">
              <li *ngFor="let hero of heroes" [class.selected]="hero === hero" (click)="onSelect(hero)">
                <span class="badge">{{hero.id}}</span> {{hero.name}}
              </li>
            </ul>
            <my-hero-detail [hero]="selectedHero"></my-hero-detail>`,
  styles: [`
    .selected {
      background-color: #CFD8DC !important;
      color: white;
    }
    .heroes {
      margin: 0 0 2em 0;
      list-style-type: none;
      padding: 0;
      width: 15em;
    }
    .heroes li {
      cursor: pointer;
      position: relative;
      left: 0;
      background-color: #EEE;
      margin: .5em;
      padding: .3em 0;
      height: 1.6em;
      border-radius: 4px;
    }
    .heroes li.selected:hover {
      background-color: #BBD8DC !important;
      color: white;
    }
    .heroes li:hover {
      color: #607D8B;
      background-color: #DDD;
      left: .1em;
    }
    .heroes .text {
      position: relative;
      top: -3px;
    }
    .heroes .badge {
      display: inline-block;
      font-size: small;
      color: white;
      padding: 0.8em 0.7em 0 0.7em;
      background-color: #607D8B;
      line-height: 1em;
      position: relative;
      left: -1px;
      top: -4px;
      height: 1.8em;
      margin-right: .8em;
      border-radius: 4px 0 0 4px;
    }
  `]

})

export class HeroComponent implements OnInit { 
  selectedHero:Hero ;
  heroes:Hero[];

  constructor(private _heroService:HeroService){} 

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

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

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

}

这有错误,看起来像missed reference of ./hero.service

但该文件已经是app.module.ts Providers Array的一部分。

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

import { AppComponent } from './app.component';
import { HeroComponent }  from './hero.component';
import { HeroDetailComponent } from './hero-detail.component';
import { HeroService } from './hero.service'; 

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

那么为什么我们需要在import { HeroService } from './hero.service';文件中再次导入hero.componnet.ts以摆脱重新发送

不是@NgModule意味着摆脱我们所有指令,组件,管道等的重复导入,如本博客所指出的那样:

https://scotch.io/bar-talk/getting-to-know-angular-2s-module-ngmodule

1 个答案:

答案 0 :(得分:0)

import { Component } from '@angular/core';
import { Hero } from './hero';
import { OnInit } from '@angular/core';

@Component({
  selector: 'my-heroes',
  providers : [HeroService],
  template:`
            <h2>My Heroes</h2>
            <ul class="heroes">
              <li *ngFor="let hero of heroes" [class.selected]="hero === hero" (click)="onSelect(hero)">
                <span class="badge">{{hero.id}}</span> {{hero.name}}
              </li>
            </ul>
            <my-hero-detail [hero]="selectedHero"></my-hero-detail>`,
  styles: [`
    .selected {
      background-color: #CFD8DC !important;
      color: white;
    }
    .heroes {
      margin: 0 0 2em 0;
      list-style-type: none;
      padding: 0;
      width: 15em;
    }
    .heroes li {
      cursor: pointer;
      position: relative;
      left: 0;
      background-color: #EEE;
      margin: .5em;
      padding: .3em 0;
      height: 1.6em;
      border-radius: 4px;
    }
    .heroes li.selected:hover {
      background-color: #BBD8DC !important;
      color: white;
    }
    .heroes li:hover {
      color: #607D8B;
      background-color: #DDD;
      left: .1em;
    }
    .heroes .text {
      position: relative;
      top: -3px;
    }
    .heroes .badge {
      display: inline-block;
      font-size: small;
      color: white;
      padding: 0.8em 0.7em 0 0.7em;
      background-color: #607D8B;
      line-height: 1em;
      position: relative;
      left: -1px;
      top: -4px;
      height: 1.8em;
      margin-right: .8em;
      border-radius: 4px 0 0 4px;
    }
  `]

})

export class HeroComponent implements OnInit { 
  selectedHero:Hero ;
  heroes:Hero[];

  constructor(private _heroService:HeroService){} 

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

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

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

}