angular4 官网英雄指南02

1、添加英雄详情组件 hero-detail.component.ts
ng g component hero-detail

Paste_Image.png
使用ng 命令生成的好处是，app.module.ts中会自动引入组件，并在declarations声明中导入组件
英雄详情组件有一个输入属性 @Input() hero:Hero 来自于父组件
修改hero-detail.component.ts代码如下：

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

@Component({
  selector: 'hero-detail',
  template: `
    <div *ngIf="hero">
      <h2>{{hero.name}} details!</h2>
      <div><label>id: </label>{{hero.id}}</div>
      <div>
        <label>name: </label>
        <input [(ngModel)]="hero.name" placeholder="name"/>
      </div>
    </div>
  `
})
export class HeroDetailComponent{
  @Input() hero:Hero;   //输入属性
  constructor() { 

  }
}

接着在app.component.ts中导入英雄详情组件，修改后的代码如下

import { Component } from '@angular/core';
import {Hero} from './hero';
import {HeroDetailComponent} from './hero-detail/hero-detail.component';

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' }
];

@Component({
  selector: 'app-root',
  template:`
    <h1>{{title}}</h1>    
    <ul class="heroes">
      <li *ngFor="let hero of heroes" 
      (click)="onSelect(hero)"
      [class.selected]="hero === selectedHero">
        <span class="badge">{{hero.id}}</span> {{hero.name}}
      </li>
    </ul>
    <hero-detail [hero]="selectedHero"></hero-detail>
  `,
  styleUrls:['./app.component.css']
})
export class AppComponent {
  title = 'Tour of Heroes';
  heroes=HEROES;
  selectedHero:Hero;
  onSelect(hero:Hero):void{
    this.selectedHero=hero;
  }
}

2、创建英雄服务 hero.service.ts
ng g service hero

Paste_Image.png
angular的服务是以依赖注入的方式来使用，可以在单个组件中单独注入，也可以在app.module.ts中全局注入
现在以全局的方式注入（因为别的地方也同样会使用到）

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

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

import {HeroService} from './hero.service';

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

3、添加模拟数据 ng g class mock-heroes
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.component.ts中也作一点小修改，将原来的 静态数据去除掉（后面会通过服务去获取）
将heroes=HEROES修改成 heroes:Hero[];

import { Component } from '@angular/core';
import {Hero} from './hero';
import {HeroDetailComponent} from './hero-detail/hero-detail.component';

@Component({
  selector: 'app-root',
  template:`
    <h1>{{title}}</h1>    
    <ul class="heroes">
      <li *ngFor="let hero of heroes" 
      (click)="onSelect(hero)"
      [class.selected]="hero === selectedHero">
        <span class="badge">{{hero.id}}</span> {{hero.name}}
      </li>
    </ul>
    <hero-detail [hero]="selectedHero"></hero-detail>
  `,
  styleUrls:['./app.component.css']
})
export class AppComponent {
  title = 'Tour of Heroes';
  heroes:Hero[];
  selectedHero:Hero;
  onSelect(hero:Hero):void{
    this.selectedHero=hero;
  }
}

hero.service.ts服务中使用模拟数据

import { Injectable } from '@angular/core';
import {Hero} from './hero';
import {HEROES} from './mock-heroes';

@Injectable()
export class HeroService {
  getHeroes():Hero[]{
    return HEROES;
  }
}

4、app.component.ts构造函数注入服务,并在ngOnInit生命周期中获取数据

import { Component,OnInit } from '@angular/core';
import {Hero} from './hero';
import {HeroDetailComponent} from './hero-detail/hero-detail.component';
import {HeroService} from './hero.service';

@Component({
  selector: 'app-root',
  template:`
    <h1>{{title}}</h1>    
    <ul class="heroes">
      <li *ngFor="let hero of heroes" 
      (click)="onSelect(hero)"
      [class.selected]="hero === selectedHero">
        <span class="badge">{{hero.id}}</span> {{hero.name}}
      </li>
    </ul>
    <hero-detail [hero]="selectedHero"></hero-detail>
  `,
  styleUrls:['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'Tour of Heroes';
  heroes:Hero[];
  selectedHero:Hero;
  constructor(private heroService:HeroService){

  }
  onSelect(hero:Hero):void{
    this.selectedHero=hero;
  }
  getHeroes():void{
    this.heroes=this.heroService.getHeroes();
  }
  ngOnInit(){
    this.getHeroes();
  }
}

5、异步服务与Promise承诺
HeroService立即返回一个模拟的英雄列表，在普通的应用中一般是通过异步返回数据，将getHeroes()方法改写成返回承诺的形式

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

服务改写后返回的是一个承诺，不再是数组，所以app.component.ts中的getHeroes()方法也要作相应的更改

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

在hero.service.ts中增加一个方法模拟异步延迟2秒返回数据

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

当然要看这个效果，将app.component.ts中的调用数据的方法 改成getHeroesSlowly()即可