Angular 2快速入门教程问题(嵌套组件)

嘿大家我学习Angular 2快速入门教程,但我使用的是从新波士顿下载的模板,因为它configuration为将打字稿转换为Java脚本,总之我的问题是当我试图嵌套英雄时,它不会在列表中单击显示,也不会导致在Chrome控制台中出现任何错误。 这里是我的文件,我知道有很多,但我不知道如果即时通讯一个容易识别的错误。

的package.json

{ "name": "angular-2", "version": "1.0.0", "scripts": { "start": "concurrently \"npm run tsc:w\" \"npm run lite\" ", "tsc": "tsc", "tsc:w": "tsc -w", "lite": "lite-server", "typings": "typings", "postinstall": "typings install" }, "license": "ISC", "dependencies": { "angular2": "2.0.0-beta.21", "systemjs": "0.19.41", "es6-shim": "^0.35.0", "reflect-metadata": "0.1.9", "rxjs": "5.0.0-beta.6", "zone.js": "0.7.4" }, "devDependencies": { "concurrently": "^3.1.0", "lite-server": "^2.1.0", "typescript": "^2.1.4", "typings": "^2.1.0" } } 

tsconfig.json:

  "compilerOptions": { "types" : [] "target": "es5", "module": "system", "moduleResolution": "node", "outDir": "app/js", "sourceMap": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, "removeComments": false, "noImplicitAny": false }, "exclude": [ "node_modules", "typings/main", "typings/main.d.ts" ] } 

main.ts:

  /*import {bootstrap} from 'angular/platform/browser'; import {AppComponent} from './app.component'; bootstrap(AppComponent); */ import { platformBrowserDynamic } from '@angular2/platform-browser-dynamic'; import { AppModule } from './app.module'; platformBrowserDynamic().bootstrapModule(AppModule); bootstrap(AppComponent); 

hero.ts

  export class Hero { id: number; name: string; } 

英雄detail.component.ts

 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.module.ts

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

app.module.ts

 import {Component} from 'angular/core'; import { Hero } from './hero'; //import { HeroDetailComponent } from './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: 'my-app', //this is two way template:` <h1>{{title}}</h1> <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: [` ignore this `] }) export class AppComponent { title = 'Tour of Heroes'; heroes=HEROES; selectedHero: Hero; onSelect(hero: Hero): void { this.selectedHero = hero; } }