由于本章节是系列文章的第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的组件拆分组装篇