This might just well be a trivial question but I need to clarify the doubts.
I was following the tutorial https://angular.io/docs/ts/latest/tutorial/toh-pt5.html
and suddenly it stuck me.
In my hero.component.js
I have
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();
}
}
This has errors which looks like caused by the missed reference of ./hero.service
But the file is already part of 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 { }
Then why do we need to import import { HeroService } from './hero.service';
again in hero.componnet.ts
file to get rid of the rerrors ?
Is not @NgModule meant to get rid of repetitive imports of all our directives,components,pipes etc. as pointed out by this blog :
https://scotch.io/bar-talk/getting-to-know-angular-2s-module-ngmodule
?
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();
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.