AngularJS2.0 学习笔记04:Click事件(在线算命App 增强互动)

2016年09月13日 APP开发, javascript 暂无评论 阅读 35 views 次

前几节的教程,仅能展示东西,还不能算是真正意义的App,无法开始算命这个基本功能。这一节我们加入互动的成份,使其再进一步。

笔记03的基础实现点击事件

引入

public selectedHero: Hero;
    onSelect(hero: Hero) { this.selectedHero = hero; }

在html元素上添加关键代码

(click)="onSelect(hero)"
效果图:
2016-09-13_173045

本单元代码如下:



 

import {Component} from 'angular2/core';

interface Hero {
id: number;
name: string;
desc:string;
}
@Component({
selector: 'my-app',
template: `
<h4>{{title}}</h4>

选择后要显示的标签 *ngif  满足条件的情况下才显示。
<div *ngIf="selectedHero">
<h2>{{selectedHero.name}} </h2>
<div><label>id: </label>{{selectedHero.id}}</div>
<div>
<label>name: </label>

依然可以关联
<div><input [(ngModel)]="selectedHero.name" placeholder="name"><em>{{selectedHero.desc}}</em></div>

</div>
</div>

<h2>可选列表</h2>

<ul class="heroes">
<li *ngFor="#hero of heroes"    //这里循环出列表
[class.selected]="hero === selectedHero"    //这个标签,使被选中时的css改变
(click)="onSelect(hero)">  //这里绑定事件
<span class="badge">{{hero.id}}</span> {{hero.name}}<em>{{hero.desc}}</em>
</li>
</ul>
`,
styles:[`
.heroes {list-style-type: none; margin-left: 1em; padding: 0; width: 10em;}
.heroes li { cursor: pointer; position: relative; left: 0; transition: all 0.2s ease; }
.heroes li:hover {color: #369; background-color: #EEE; left: .2em;}
.heroes .badge {
font-size: small;
color: white;
padding: 0.1rem 0.7em;
background-color: #369;
line-height: 1rem;
position: relative;
left: -1px;
top: -1px;
}
em{
font-size:0.8rem;}
.selected { background-color: #EEE; color: #369; }
`]
})
export class AppComponent {
public title = '抽签算卦';
public hero: Hero = {
id: 1,
name: '吕氏灵签',
desc:'仅为娱乐,无其它参考意义'
};
public heroes = HEROES;

public selectedHero: Hero;
onSelect(hero: Hero) { this.selectedHero = hero; }
}
var HEROES: Hero[] = [
{id: 1,
name: '上上',
desc:'大吉大利,百事顺遂,赶紧去买彩票'},
{id: 2,
name: '上吉',
desc:'天时、地利又人和,家庭和睦,身体健康,会朋友喝酒吧'},
{id: 3,
name: '中吉',
desc:'苦尽甘来,风雨之后见彩虹,要转好运了'},
{id: 4,
name: '中平',
desc:'黎明前的曙光。寓象中不是“怀才不遇”,而是“怀才待遇”。多嘱求者“一动不若一静”。无大喜亦无大悲。在这五种签意中,最欣赏的还是中平签,因为它更符合百姓,贴近生活。其不似“上上”般如中头彩;不似“上吉”般天时、地利又人和;不似“中吉”般起起落落,如咖啡加糖;“中平”更多的是人们常求的“平平”和“淡淡”。'},
{id: 5,
name: '下下',
desc:'凶多吉少.否极泰来,物极必反,再熬一熬就过去了。要不再抽一签?'}

] ;

onSelect是函数名称,传入了一个参数heroonSelect函数定义在AppComponent 类中,代码如下:

onSelect(hero: Hero) { this.selectedHero = hero; }

在运行过程中,selectedHero第一次为空,我们需要判断一下selectedHero是否为null, 判断一个变量是否为空 可以使用*ngIf

在点击事件后,有时候需要更新一下样式,以表示当前选中项,示例代码:

[class.selected]="hero === selectedHero"

[class.selected]的取值是truefalse, true表示样式生效。 模板中的html元素的属性绑定用[ ]

给我留言

您必须 登录 才能发表留言!

Copyright © 大一网 保留所有权利.  

用户登录

分享到: