#1 angular2英雄模型所有代码

app/app.module.ts

@@ -2,18 +2,21 @@ import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { FormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
-import { HttpModule }    from '@angular/http';
+import { HttpModule } from '@angular/http';
 
 import { HeroDetailComponent } from './hero-detail.component';
 import { AppComponent } from './app.component';
 import { HeroesComponent } from './heroes.component'
 import { HeroService } from './hero.service'
 import { DashboardComponent } from './dashboard.component'
-import { AppRoutingModule }     from './app-routing.module';
+import { AppRoutingModule } from './app-routing.module';
+import { HeroSearchComponent } from './hero-search.component';
 
 // Imports for loading & configuring the in-memory web api
 import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
-import { InMemoryDataService }  from './in-memory-data.service';
+import { InMemoryDataService } from './in-memory-data.service';
+
+import './rxjs-extensions';
 
 @NgModule({
   imports: [
@@ -27,7 +30,8 @@ import { InMemoryDataService }  from './in-memory-data.service';
     AppComponent,
     HeroDetailComponent,
     HeroesComponent,
-    DashboardComponent
+    DashboardComponent,
+    HeroSearchComponent
   ],
   providers: [
     HeroService

app/dashboard.component.html

@@ -1,5 +1,9 @@
 <h3>Top Heroes</h3>
-<a *ngFor="let hero of heroes" [routerLink]="['/detail', hero.id]" class="col-1-4">
-    <div class="module hero">
-        <h4>{{hero.name}}</h4>
-    </div>
+<div class="grid grid-pad">
+    <a *ngFor="let hero of heroes" [routerLink]="['/detail', hero.id]" class="col-1-4">
+        <div class="module hero">
+            <h4>{{hero.name}}</h4>
+        </div>
+    </a>
+</div>
+<hero-search></hero-search>

app/hero-search.component.css

@@ -0,0 +1,15 @@
+.search-result {
+    border-bottom: 1px solid gray;
+    border-left: 1px solid gray;
+    border-right: 1px solid gray;
+    width: 195px;
+    height: 20px;
+    padding: 5px;
+    background-color: white;
+    cursor: pointer;
+}
+
+#search-box {
+    width: 200px;
+    height: 20px;
+}

app/hero-search.component.html

@@ -0,0 +1,9 @@
+<div id="search-component">
+    <h4>Hero Search</h4>
+    <input #searchBox id="search-box" (keyup)="search(searchBox.value)" />
+    <div>
+        <div *ngFor="let hero of heroes | async" (click)="gotoDetail(hero)" class="search-result">
+            {{hero.name}}
+        </div>
+    </div>
+</div>

app/hero-search.component.ts

@@ -0,0 +1,50 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { Observable } from 'rxjs/Observable';
+import { Subject } from 'rxjs/Subject';
+import { HeroSearchService } from './hero-search.service';
+import { Hero } from './hero';
+
+
+@Component({
+    moduleId: module.id,
+    selector: 'hero-search',
+    templateUrl: 'hero-search.component.html',
+    styleUrls: ['hero-search.component.css'],
+    providers: [HeroSearchService]
+})
+
+
+export class HeroSearchComponent implements OnInit {
+    heroes: Observable<Hero[]>;
+    private searchTerms = new Subject<string>();
+
+    constructor(
+        private heroSearchService: HeroSearchService,
+        private router: Router) { }
+
+    // Push a search term into the observable stream.
+    search(term: string): void {
+        this.searchTerms.next(term);
+    }
+
+    ngOnInit(): void {
+        this.heroes = this.searchTerms
+            .debounceTime(300)        // wait for 300ms pause in events
+            .distinctUntilChanged()   // ignore if next search term is same as previous
+            .switchMap(term => term   // switch to new observable each time
+                // return the http search observable
+                ? this.heroSearchService.search(term)
+                // or the observable of empty heroes if no search term
+                : Observable.of<Hero[]>([]))
+            .catch(error => {
+                // TODO: real error handling
+                console.log(error);
+                return Observable.of<Hero[]>([]);
+            });
+    }
+    gotoDetail(hero: Hero): void {
+        let link = ['/detail', hero.id];
+        this.router.navigate(link);
+    }
+}

app/hero-search.service.ts

@@ -0,0 +1,14 @@
+import { Injectable } from '@angular/core';
+import { Http, Response } from '@angular/http';
+import { Observable } from 'rxjs';
+import { Hero } from './hero';
+
+@Injectable()
+export class HeroSearchService {
+    constructor(private http: Http) { }
+    search(term: string): Observable<Hero[]> {
+        return this.http
+            .get(`app/heroes/?name=${term}`)
+            .map((r: Response) => r.json().data as Hero[]);
+    }
+}

app/rxjs-extensions.ts

@@ -0,0 +1,12 @@
+// Observable class extensions
+import 'rxjs/add/observable/of';
+import 'rxjs/add/observable/throw';
+
+// Observable operators
+import 'rxjs/add/operator/catch';
+import 'rxjs/add/operator/debounceTime';
+import 'rxjs/add/operator/distinctUntilChanged';
+import 'rxjs/add/operator/do';
+import 'rxjs/add/operator/filter';
+import 'rxjs/add/operator/map';
+import 'rxjs/add/operator/switchMap';