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