Angular2入门——(3)模板的逻辑控制
2016-06-05 13:02
567 查看
使用条件逻辑
有时我们需要模板的一部分内容在满足一定条件时才显示,比如右边示例中的EzReader组件,对于试用用户,它将在正文之上额外显示一个广告:
这是指令NgIf发挥作用的场景,它评估属性ngIf的值是否为真,来决定是否渲染template元素的内容:
@View({
template : `<!--根据变量trial的值决定是否显示广告图片-->
<template [ng-if]="trial==true">
<img src="ad.jpg">
</template>
<!--以下是正文-->
<pre>...
`
})
Angular2同时提供了两种语法糖,让NgIf写起来更简单,下面的两种书写方法和上面
的正式语法是等效的:
//使用template attribute
<img src="ad.jpg" template="ng-if tiral==true">
//使用*前缀
<img src="ad.jpg" *ng-if="tiral==true">
看起来,显然*ng-if的书写方法更加有人情味儿,不过无论采用哪种书写方法,都将转换 成上面的正式写法,再进行编译。
需要指出的是,NgIf是Angular2预置的指令/Directive,所以在使用之前,需要:
从angular2库中引入NgIf类型定义
在组件的ViewAnnotation中通过属性directives声明对该指令的引用
使用分支逻辑
如果组件的模板需要根据某个表达式的不同取值展示不同的片段,可以使用NgSwitch系列指令 来动态切分模板。比如右边示例中的广告组件EzPromotion,需要根据来访者性别的不同推送不同的广告:
NgSwitch包含一组指令,用来构造包含多分支的模板:
NgSwitch
NgSwitch指令可以应用在任何HTML元素上,它评估元素的ngSwitch属性值,并根据这个值
决定应用哪些template的内容(可以同时显示多个分支):
<ANY [ng-switch]="expression">...</ANY>
NgSwitchWhen
NgSwitchWhen指令必须应用在NgSwitch指令的子template元素上,它通过属性ngSwitchWhen指定一个表达式,
如果该表达式与父节点的NgSwitch指令指定的表达式值一致,那么显示这个template的内容:
<ANY [ng-switch]="...">
<!--与变量比较-->
<template [ng-switch-when]="variable">...</template>
<!--与常量比较-->
<template ng-switch-when="constant">...</template>
</ANY>
NgSwitchDefault
NgSwitchDefault指令必须应用在NgSwitch指令的子template元素上,当没有NgSwitchWhen指令匹配
时,NgSwitch将显示这个template的内容:
<ANY [ng-switch]="...">
<template ng-switch-default>...</template>
</ANY>
需要注意的是,NgSwitch系列指令都是Angualr2的预置指令,在模板中使用之前,需要
从Angular2库中引入NgSwitch系列指令
通过ViewAnnotation的directives属性进行声明
NgFor- 循环逻辑
如果希望利用一组可遍历的数据动态构造模板,那么应当使用NgFor指令。例如右边示例中的EzStar组件,用来展示演员的作品列表:
迭代
NgFor指令应用在template元素上,对ngForOf属性指定的数据集中的每一项
实例化一个template的内容:
<template ng-for [ng-for-of]="items" >
<li>----------</li>
</template>
如果items数据集有3条记录,那么会生成3个li对象,就像这样:
<li>----------</li>
<li>----------</li>
<li>----------</li>
不过这没多大用。
使用数据项
好在我们还可以为数据集的每一项声明一个局部变量,以便在模板内引用:
<template ng-for [ng-for-of]="items" #item>
<li>{{item}}</li>
</template>
假如items数据集是一个数组:["China","India","Russia"],那么 现在生成的结果就有点用了:
<li>China</li>
<li>India</li>
<li>Russia</li>
使用数据项索引
有时还需要数据项在数据集中的索引,我们也可以为数据集的每一项的索引声明一个 局部变量,以便在模板内引用:
<template ng-for [ng-for-of]="items" #item #i="index">
<li>[{{i+1}}] {{item}}</li>
</template>
现在生成的结果更规矩了:
<li>[1] China</li>
<li>[2] India</li>
<li>[3] Russia</li>
语法糖
与NgIf类似,Angular2也为NgFor提供了两种语法糖:
//使用template attribute
<ANY template="ng-for #item of items;#i=index">...</ANY>
//使用*前缀
<ANY *ng-for="#item of items;#i=index">...</ANY>
毫无疑问,应当尽量使用*ng-for的简便写法,这可以提高模板的可读性。
长按图片识别图中二维码(或搜索微信公众号FrontEndStory)关注“前端那些事儿”,带你探索前端的奥秘。
相关文章推荐
- [POJ 2836] Rectangular Covering (状压DP)
- 关于angularJS绑定数据时自动转义html标签
- AngularJS 模块化
- angular tab切换
- Backbone与Angular的比较
- angularjs2 学习笔记(六) Form
- AngularJS 学习之路(1)
- angular的那些事
- angular.element()用法
- AngularJS的学习--$on、$emit和$broadcast的使用
- angular中的angular-ngSanitize模块-$sanitize服务
- angular实现window.onload和$(document).ready
- angular中compile和link函数详解
- angular中的factory、service和provider
- AngularJS中的$emit,$broadCast,$on
- angularJs学习笔记
- angularjs filter过滤结果集
- AngularJS的一些定义和理解
- AngularJS之高级Route【三】(八)
- 形象的讲解angular中的$q与promise