Angular2初级篇之主从结构.docx

An gular2 初级篇之主从结构 先看一下目录结构： angu!ar-tour-of-heroes 叩p app.匚omponent.ts app.module.ts m^-i门-t吕 件ods_modules + _. ■i ndex, html pa匚kage?jwac yty〕es,css systemjs.config.js tscanfi g. json 下面我们将写一个基础的列表显示。 1、在ponent.ts 中创建一个英雄数组: [html] view plain copy export class Hero {// 英雄实体类 id: number; name: string; } [html] view plain copy 1. const HEROES :Hero[] = [// 英雄数组 2. { id: 11, name: 'Mr. Nice' }, 3. { id: 12, name: 'Narco' }, 4. { id: 13, name: 'Bombasto' }, 5. { id: 14, name: 'Celeritas' }, 6. { id: 15, name: 'Magneta' }, 7. { id: 16, name: 'RubberMan' },  { id: 17, name:'Dynama'}, { id: 18, name: 'Dr IQ'}, { id: 19, name: 'Magma' }, { id: 20, name: 'Tornado' } ]; 以上代码放到import代码后面. 2、修改ponent.ts 来暴露英雄数组，以便进行绑定： [html] view plain copy export class AppComponent { title ="英雄之旅"； heroes = HEROES/赋值给heros并把heros暴露出来以便绑定 } 3、绑定heros到界面上: 1 ）修改 ponent.ts [html] view plain copy @Component（{ moduleId: module.id, selector: 'my-app', templateUrl: 'ponent.html', styleUrls: ['../assets/css/ponent.css'] }） 2）、仓U建 ponent.html 并修改 [html] view plain copy <h2>英雄列表v/h2> <ul class = "heroes" > TOC \o "1-5" \h \z <li * ngFor ="let hero of heroes" > <span class ="badge" >{{hero.id}} </span> {{}} </li> </ul> 4、创建点击列表点击事件并绑定到界面上: 1）、修改 ponent.ts 下 AppComponent{...} 建立自定义变量和点击事件: [html] view plain copy 1. selectedHero: Hero;// 自定义变量 -英雄 2. onSelect(hero: Hero): void {// 点击事件 3. this.selectedHero - hero ; 4. } 2)、修改 ponent.html [html] view plain copy <li * ngFor ="let hero of heroes" (click)="onSelect(hero)" > <span class -'badge" >{{hero.id}} </span> {{}} </li> 事件绑定详解 COPY CODE (click)- "o nSelect(hero)" 圆括号标识＜li＞元素上的click 事件是绑定的目标。等号右边的表达式调用 AppComponent的onSelect() 方法，并把模板输入变量hero作为参数传进去。 它是我们前面在ngFor中定义的那个hero变量。 5、绑定选中的英雄到界面上: [html] view plain copy 1. <div * ngIf -"selectedHero" > 2. <h2> {{selectedH}} 详情</h2> 3. vdiv><label> id: </label> {{selectedHero.id}} </div> 4. <div> 5. <label> 姓名：</label> 6. vinput [(ngModel)]="selectedH" placeholder -"name" /> 7. </div> 8. </div>  记住，nglf前导星号