从零详细搭建一个简单的angular项目（6）angualr指令以及事件绑定篇

由于本章节是系列文章的第6篇，有些代码，可能会跟前面文章有关联，如果有实在看不懂的地方，不妨回去看看上两篇。

本文主要写：*ngFor,添加click事件绑定，*ngIf，css类绑定
一般而言，开头带*的是angular内置保留的，我们称之为指令。

这一节需要一些假数据，我们先创建一个：
src/app/mock-heroes.ts文件：

import {Hero} from './hero';

export const HEROES:Hero[] = {
	{id:1,name:'haha1'},
	{id:4,name:'haha4'},
	{id:3,name:'haha3'},
	{id:2,name:'haha2'},
}

简单解释一下：
导入了hero类，别名（用在该ts中的别名）叫做Hero
下面的HEROES:Hero[]就是声明了一个Hero类型（也就是hero）的对象数组
所以下面的id和name自然也就知道是hero对象定义的两个变量。
然后下面直接初始化了4个数据。

接下来我们会使用这些假数据
打开heroes.component.ts文件，添加一个heroes的变量:

import {HEROES} from './mock-heroes';
......
 heroes = HEROES;

简单解释一下就是导入上面我们定义的假数据，然后定义一个叫做heroes的变量，并赋值HEROES

现在我们已经把假数据绑定到我们的组件的ts文件上了，但是UI上怎么显示呢，总不能一条一条的显示吧，这时候就用到了指令*ngFor
使用举例:
heroes.component.html文件：

<ul>
	<li *ngFor = "let hero of heroes">
		<span>{{hero.name}}</span>
	</li>
</ul>

这里可以看到使用了*ngFor指令，后面的let hero of heroes是使用语法
理解为：let+单个对象名（自定义）+of+对象列表名（ts文件中存在的）
然后具体使用某个对象的时候就可以直接使用我们”自定义“的对象了，属性的话直接对象调用属性即可。

OK，*ngFor的写完了，再写怎么用点击事件绑定
heroes,component.html文件：
将上面的代码<li *ngFor = "let hero of heroes">改为

<li *ngFor = "let hero of heroes" (click) = "onSelect(hero)”>

其实就是在原理后面加了个(click) = "onSelect(hero)”>
这个（click）就是点击事件绑定的语法，后面跟的就是ts文件中对应的点击事件的处理方法。

这时候打开heroes.component.ts文件，把onSelect(hero)方法写进来：

selectHero:Hero;

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

代码很简单，就是声明了一个叫做selectHero的Hero对象。
然后虾米那的方法就是：

方法名(实参:形参)：返回类型{
	方法结构体
}

现在我们这个方法作用就是当点击按钮是，我们点击的这个的hero对象会传递给ts文件的selectHero变量，现在我们让这个变量显示出来，所以我们回到heroes.component.html文件，在最后加一行代码：

<div>{{selectHero.name}}</div>

这样点击某个按钮的时候，这个div里面显示的name就变成我们点击的按钮的name了

这时我们启动一下应用，发现应用挂了，这是为什么呢？
很简单，你想我们上面<div>{{selectHero.name}}</div>绑定了这个selectHero，但是这个变量初始化是个null呀，只有点击了按钮之后这个变量才有值。因为是null，自然就是控制台报错的undefined

这时候我们想，要是有个if判断一下，有值显示，没值不显示多好，所以接下来也就是*ngIf指令的使用

heroes.component.html文件（修改<div>{{selectHero.name}}</div>为）：

<div *ngIf = "selectHero">{{selectHero.name}}</div>

这个是什么意思呢？
就是如果selectHero有值的话，这个用了*ngIf的div就会显示（懒加载）
这样就不会报错undefined的错误了。
这里加深一下理解，angular中，*ngif判断为false会从DOM中移除这个标签，自然就不会加载了自然也就不报错了

OK，最后一个“css类绑定”

我们新建一个heroes.component.css文件：

.test{
	color:#123456;
}

Angualr的css类绑定机制能根据条件动态的添加或移除一个css样式。
语法：[class.类的样式名] = " 条件“
举例：
heroes.component.html文件：

<div *ngIf = "selectHero" [class.test] = "selectHero.id == 3”>{{selectHero.name}}</div>

这样当我们点击id是3的按钮时，div的颜色就会改变。

下一篇angular的组件拆分组装篇