一步一步学习Angular2(03.示例 MASTER/DETAIL)

来源：互联网发布：大数据量表设计编辑：程序博客网时间：2024/06/13 08:22

接着上一篇文章,今天跟随官网上的例子学习怎样增加一个英雄列表,并为它增加漂亮的样式.

启动我们的应用
打工上一章的工程文件夹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;    }}

0 0