接着上一篇文章,今天跟随官网上的例子学习怎样增加一个英雄列表,并为它增加漂亮的样式.
启动我们的应用
打工上一章的工程文件夹angular2-tour-of-heroes
执行
npm start
英雄列表
现在我们要增加许多英雄到我们的应用中,所以我们需要定义一组英雄.
打开app.component.ts
在其中加入下面的代码.
var HEROES: Hero[] = [
{ id: 1, name: '雷神' },
{ id: 2, name: '风暴' },
{ id: 3, name: '擎天柱' },
{ id: 4, name: '大黄蜂' },
{ id: 5, name: '闪电侠' },
{ id: 6, name: '光速侠' },
{ id: 7, name: '路飞' },
{ id: 8, name: '小苍' },
{ id: 9, name: '超人' },
{ id: 10, name: '零零七' }
];
实际应用中我们通常会获取这些数据从我们的后端服务器,但为了方便演示先模拟一些数据.
把这个定义好的列表赋值给我们的AppComponent
类,为此我们需要去掉并且增加一个属性.完成后应该是下面的样子.
export class AppComponent {
public title: string = 'Tour of Heroes.';
public heroes = HEROES;
}
新增了一个heroes
属性用来存放我们的英雄列表.有同学包括我会想为什么不直接把列表定义到AppComponent
中,官网解释说,最终会直接从数据服务中得到我们的列表数据,所以在一开始设计的时候就把它从AppComponent
中分离出来.
列表模板
让我们修改我们的模板来展示一个英雄列表,插入到应用的标题,与英雄名称之间
<h2>My Heroes</h2>
<ul class="heroes">
<li>
<!-- each hero goes here -->
</li>
</ul>
现在使用Angular指令ngFor
来循环我们的列表,修改我们的li
为
<li *ngFor="#hero of heroes">
ngFor
前面的星号,是一个语法糖,是为了方便我们书写代码,详细的说明可以看这里.
heroes
是我们在AppComponent中定义的数组,而#
号表名要把循环得到的每一个变量放到#
号后面的变量里,
现在我们在li
中间,使用保存的hero
变量展示相关的信息.
<li *ngFor="#hero of heroes">
<span class="badge">{{hero.id}}</span> {{hero.name}}
</li>
为列表增加类型
我们理用@Component
注解中的styles
属性为我们的列表增加样式,同样使用反引号格式化代码.
styles: [`
.selected {
background-color: #CFD8DC !important;
color: white;
}
.heroes {
margin: 0 0 2em 0;
list-style-type: none;
padding: 0;
width: 10em;
}
.heroes li {
cursor: pointer;
position: relative;
left: 0;
background-color: #EEE;
margin: .5em;
padding: .3em 0em;
height: 1.6em;
border-radius: 4px;
}
.heroes li.selected:hover {
color: white;
}
.heroes li:hover {
color: #607D8B;
background-color: #EEE;
left: .1em;
}
.heroes .text {
position: relative;
top: -3px;
}
.heroes .badge {
display: inline-block;
font-size: small;
color: white;
padding: 0.8em 0.7em 0em 0.7em;
background-color: #607D8B;
line-height: 1em;
position: relative;
left: -1px;
top: -4px;
height: 1.8em;
margin-right: .8em;
border-radius: 4px 0px 0px 4px;
}
`]
注意,设置的样式只会在这个组件中起作用,它不会影响程序中其它的代码.
选择英雄
单击事件
现在让我们为列表增加一点交互事件,Angular事件通过小括号中定义事件类型来声明的,如
(click)="onSelect(hero)"
onSelect(hero)
是AppComponent中定义的一个函数,我们把它放到li
中
<li *ngFor="#hero of heroes" (click)="onSelect(hero)">
<span class="badge">{{hero.id}}</span> {{hero.name}}
</li>
这样当鼠标在列表中某一项上点击时会触发onSelect
函数,并会传递当前选择的hero
变量
增加处理函数
当我们在列表中点击的时候,需要记住我们选择的是谁,为此我们在AppComponent
类中增加一个selectedHero
属性,用来存放当前选中的英雄. 并写一个函数响应单击事件.
public selectedHero: Hero;
public onSelect(hero: Hero) {
this.selectedHero = hero;
}
上面的代码就是当点击列表时,传递当前的hero变量到selectedHero
中.
显示详细信息
修改我们显示详细信息的模板为,使用我们当前选中了的英雄
<h2>{{selectedHero.name}} details!</h2>
<div><label>id: </label>{{selectedHero.id}}</div>
<div>
<label>name: </label>
<input [(ngModel)]="selectedHero.name" placeholder="name"/>
</div>
条件指令ngIf
这时我们发现当页面刷新后还没有选择任何英雄时,详细信息处显示有问题.这是因为这时selectedHero
还没有被赋值,我们需要判断一下,当selectedHero
未赋值时隐藏详细信息.
<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>
*ngIf
指令的等号右端是用来判断的条件. 如果写成*ngIf='selectedHero && selectedHero.id==7'
则只有当单击id为7的英雄时才显示详细信息.
列表选中后的样式
为li
增加如下的代码
[class.selected]="hero === selectedHero"
[class.selected]
这个是Angular的属性绑定 他会在li
中增加一个class
属性,属性的值为等号右边的变量值. 如<img [src]="heroImageUrl">
即为把heroImageUrl
的值赋给src属性.
<li *ngFor="#hero of heroes"
[class.selected]="hero === selectedHero"
(click)="onSelect(hero)">
<span class="badge">{{hero.id}}</span> {{hero.name}}
</li>
更详细的用法看属性绑定章.
效果如图
附上代码
app.component.ts
import {Component} from 'angular2/core';
interface Hero {
id: number;
name: string;
}
var HEROES: Hero[] = [
{ id: 1, name: '雷神' },
{ id: 2, name: '风暴' },
{ id: 3, name: '擎天柱' },
{ id: 4, name: '大黄蜂' },
{ id: 5, name: '闪电侠' },
{ id: 6, name: '光速侠' },
{ id: 7, name: '路飞' },
{ id: 8, name: '小苍' },
{ id: 9, name: '超人' },
{ id: 10, name: '零零七' }
];
@Component({
selector: 'my-app',
template: `
<h1>{{title}}</h1>
<h2>My Heroes</h2>
<ul class='heroes'>
<li *ngFor="#hero of heroes"
[class.selected]="hero === selectedHero"
(click)="onSelect(hero)">
<span class="badge">{{hero.id}}</span> {{hero.name}}
</li>
</ul>
<div *ngIf='selectedHero'>
<h2>{{selectedHero.name}} details!</h2>
<div>
<label>id:</label> {{selectedHero.id}}
</div>
<div>
<label>name:</label>
<input [(ngModel)]='selectedHero.name'>
</div>
<div>
`,
styles: [`
.selected {
background-color: #CFD8DC !important;
color: white;
}
.heroes {
margin: 0 0 2em 0;
list-style-type: none;
padding: 0;
width: 10em;
}
.heroes li {
cursor: pointer;
position: relative;
left: 0;
background-color: #EEE;
margin: .5em;
padding: .3em 0em;
height: 1.6em;
border-radius: 4px;
}
.heroes li.selected:hover {
color: white;
}
.heroes li:hover {
color: #607D8B;
background-color: #EEE;
left: .1em;
}
.heroes .text {
position: relative;
top: -3px;
}
.heroes .badge {
display: inline-block;
font-size: small;
color: white;
padding: 0.8em 0.7em 0em 0.7em;
background-color: #607D8B;
line-height: 1em;
position: relative;
left: -1px;
top: -4px;
height: 1.8em;
margin-right: .8em;
border-radius: 4px 0px 0px 4px;
}
`]
})
export class AppComponent {
public title: string = 'Tour of Heroes.';
public selectedHero: Hero;
public heroes = HEROES;
public onSelect(hero: Hero) {
this.selectedHero = hero;
}
}