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

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

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