Angular 角度2中app.module.ts中的提供程序数组

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

我正在学习教程

https://angular.io/docs/ts/latest/tutorial/toh-pt5.html

我突然被它卡住了

在myhero.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();
  }

}

那么为什么我们需要从“/hero.service”导入

import{HeroService}hero.component.ts

文件中的code>来消除错误

不是@NgModule想要摆脱我们所有指令、组件、管道等的重复导入。正如本博客所指出的：

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

？

从“@angular/core”导入{Component}；

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();
  }

}

从“/Hero”导入{Hero}； 从“@angular/core”导入{OnInit}； @组成部分({ 选择器：“我的英雄”， 提供者：[服务]， 模板：` 我的英雄

{{hero.id}{{hero.name}

`, 风格：[` .选定{ 背景色：#CFD8DC！重要； 颜色：白色； } .英雄{ 边际：0.02米0； 列表样式类型：无； 填充：0； 宽度：15em； } 李先生{ 光标：指针； 位置：相对位置； 左：0； 背景色：#EEE； 边缘：.5em； 填充：.3em0； 高度：1.6em； 边界半径：4px； } .李英雄.选定：悬停{ 背景色：#BBD8DC！重要； 颜色：白色； } .英雄李：悬停{ 颜色：#607D8B； 背景色：#DDD； 左：1米； } .英雄.文本{ 位置：相对位置； 顶部：-3px； } .英雄.徽章{ 显示：内联块； 字体大小：小； 颜色：白色； 填充：0.8em 0.7em 0.7em； 背景色：#607D8B； 线高：1米； 位置：相对位置； 左：-1px； 顶部：-4px； 高度：1.8em； 右边距：.8em； 边界半径：4px 0 0 4px； } `] }) 导出类HeroComponent实现OnInit{ 选择英雄：英雄； 英雄：英雄[]； 构造函数（私有_heroService:heroService）{} onSelect（英雄：英雄）：无效{ this.selectedHero=英雄； } getHeroes（）：void{ this.\u heroService.getheromes（）.then（myheromes=>this.heromes=myheromes）； } ngOnInit（）：void{ 这个。getheros（）； } }

---

我认为您在这里混淆了两件不同的事情。

@NgModule

中的导入为使用此模块和模块内组件的其他人声明或提供不同的组件、管道、服务等。第二个导入，位于每个组件的顶部，例如从“/user service”导入{UserService}类似于导入接口描述，以向此组件提供有关如何使用此服务的知识。@alexkucksdorf似乎不将服务导入

app.module.ts

并将

提供程序

数组留空，只需将服务导入

组件

，并使用该服务的实例即可使一切正常工作。那么，为什么我们在

模块

中有

提供者

数组呢？如果您使用

模块

方法，您将有一个服务实例在您的组件之间共享，这意味着更少的内存负载和组件之间更容易的数据共享。否则，每个请求组件将有自己的服务实例。

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();
  }

}