Angular2初级篇之主从结构

前面一篇文章讲解了如何建立一个基础项目。若又不知道的请看前一篇文章，这里不做赘述了。

先看一下目录结构：

下面我们将写一个基础的列表显示。

1、在app.component.ts中创建一个英雄数组：

export class Hero {//英雄实体类   id: number;   name: string; } 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' } ]; 以上代码放到import代码后面.

2、修改app.component.ts来暴露英雄数组，以便进行绑定：

export class AppComponent { title = "英雄之旅"; heroes = HEROES;//赋值给heros并把heros暴露出来以便绑定 }3、绑定heros到界面上：

 1）修改app.component.ts

@Component({ moduleId: module.id, selector: 'my-app', templateUrl: 'app.component.html', styleUrls: ['../assets/css/app.component.css'] })2)、 创建app.component.html并修改

<h2>英雄列表</h2> <ul class="heroes"> <li *ngFor="let hero of heroes"> <span class="badge">{{hero.id}}</span> {{hero.name}} </li> </ul>

4、创建点击列表点击事件并绑定到界面上：

1）、修改app.component.ts下AppComponent{...}

建立自定义变量和点击事件：

selectedHero: Hero;//自定义变量-英雄 onSelect(hero: Hero): void {//点击事件 this.selectedHero = hero; }2）、修改app.component.html

<li *ngFor="let hero of heroes" (click)="onSelect(hero)"> <span class="badge">{{hero.id}}</span> {{hero.name}} </li>

事件绑定详解

COPY CODE (click)="onSelect(hero)"

圆括号标识<li>元素上的click事件是绑定的目标。 等号右边的表达式调用AppComponent的onSelect()方法，并把模板输入变量hero作为参数传进去。 它是我们前面在ngFor中定义的那个hero变量。

5、绑定选中的英雄到界面上：

<div *ngIf="selectedHero"> <h2>{{selectedHero.name}}详情</h2> <div><label>id: </label>{{selectedHero.id}}</div> <div> <label>姓名: </label> <input [(ngModel)]="selectedHero.name" placeholder="name"/> </div> </div> 记住， ngIf 前导星号 ( * ) 是语法中的重要组成部分。

最后别忘记添加上样式：

<li *ngFor="let hero of heroes" [class.selected]="hero === selectedHero" (click)="onSelect(hero)"> <span class="badge">{{hero.id}}</span> {{hero.name}} </li>

下面是css

.selected { background-color: #CFD8DC !important; color: white; } .heroes { margin: 0 0 2em 0; list-style-type: none; padding: 0; width: 15em; } .heroes li { cursor: pointer; position: relative; left: 0; background-color: #EEE; margin: .5em; padding: .3em 0; height: 1.6em; border-radius: 4px; } .heroes li.selected:hover { background-color: #BBD8DC !important; color: white; } .heroes li:hover { color: #607D8B; background-color: #DDD; left: .1em; } .heroes .text { position: relative; top: -3px; } .heroes .badge { display: inline-block; font-size: small; color: white; padding: 0.8em 0.7em 0 0.7em; background-color: #607D8B; line-height: 1em; position: relative; left: -1px; top: -4px; height: 1.8em; margin-right: .8em; border-radius: 4px 0 0 4px; } 添加到相应的文件中就可以了。

参考：https://angular.cn/docs/ts/latest/tutorial/toh-pt2.html