#1 第四章多个组件搞定 http://origin.angular.live/docs/ts/latest/tutorial/toh-p…

…t3.html

app/app.component.ts

@@ -21,22 +21,15 @@ const HEROES: Hero[] = [
   selector: 'my-app',
   template: `
   <h1>{{title}}</h1>
-  
-  <div *ngIf="selectedHero">
-    <h2>{{selectedHero.name}} details!</h2>
-    <div><label>id: </label>{{selectedHero.id}}</div>
-    <div>
-      <label>name: </label>
-      <input [(ngModel)]="selectedHero.name" placeholder="name"/>
-    </div>
-  </div>
+  <h2>My Heroes</h2>
   <ul class="heroes">
     <li *ngFor="let hero of heroes" 
       [class.selected]="hero === selectedHero"
       (click)="onSelect(hero)">
       <span class="badge">{{hero.id}}</span> {{hero.name}}
     </li>
   </ul>
+  <my-hero-detail [hero]="selectedHero"></my-hero-detail>
   `,
   styles: [`
   .selected {
@@ -90,10 +83,6 @@ const HEROES: Hero[] = [
 })
 export class AppComponent {
   title = 'Tour of Heroes';
-  // hero: Hero = {
-  //   id: 1,
-  //   name: 'Windstorm'
-  // };
   heroes = HEROES;
   selectedHero: Hero;
 

app/app.module.ts

@@ -2,11 +2,12 @@ import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { FormsModule } from '@angular/forms';
 
+import { HeroDetailComponent } from './hero-detail.component';
 import { AppComponent } from './app.component';
 
 @NgModule({
   imports: [BrowserModule, FormsModule],
-  declarations: [AppComponent],
+  declarations: [AppComponent, HeroDetailComponent],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

app/hero-detail.component.ts

@@ -0,0 +1,20 @@
+import { Component, Input } from '@angular/core';
+import { Hero } from './hero'
+
+@Component({
+    selector: 'my-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;
+}

app/hero.ts

@@ -0,0 +1,4 @@
+export class Hero {
+    id: number;
+    name: string;
+}