深入理解Angular2 模板语法


Posted in Javascript onAugust 07, 2016

1. 说明

Angular2的模板用来显示组件外观,作为视图所用,用法和html语法基本一致,最简单的Angular2的模板就是一段html代码。Angular模板语法主要包括以下几个部分:

l 直接绑定

l 插值表达

l 属性绑定

l 事件绑定

l 双向绑定

l 样式绑定

l 模板和 *

l 局部变量

首先来看一个模板例子,如下所示:

import { Component, OnInit } from '@angular/core';
@Component({
selector: 'ui-demo',
template: ` <form class="form-horizontal" role="form">
<div class="form-group">
<legend title="form">title</legend>
</div>
<span class="label label-warning">attention:{{msg}}</span>
<div class="input-group">
<div class="input-group-addon">name</div>
<input type="text" class="form-control" id="name" name="name" [attr.size]="size" [placeholder]="name">
</div>
<div class="input-group">
<div class="input-group-addon">age</div>
<input type="text" class="form-control" (change)="change()" id="age" name="age" [placeholder]="age">
</div>
<div class="input-group">
<div class="input-group-addon">sex</div>
<input type="text" class="form-control" [(ngModel)]="sex" id="sex" name="sex" [placeholder]="sex">
</div>
<div class="input-group" *ng-if="needpwd">
<div class="input-group-addon">pwd</div>
<input #inPwd type="password" class="form-control" [(ngModel)]="pwd" id="pwd" name="pwd">
<button type="button" class="btn btn-warning" (click)="show(inPwd.value)">warn</button>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2" [style.color]="color">
<button type="submit" class="btn btn-primary" [class.btn-primary]="isPrimary">Submit</button>
</div>
</div>
</form>`
})
export class TemplateDemoComponent implements OnInit {
msg: string = "注意事项";
name: string = "name";
size: number = 4;
age: number = 15;
sex: string = 'male';
needpwd: boolean = true;
pwd: string = '';
color: string = "red";
isPrimary: boolean = true;
constructor() { }
ngOnInit() { }
change() {
}
show($event) {
console.log($event);
}
}

1.1 直接绑定

将字符串直接绑定在对应的属性上,例如将字符串 form 绑定到title属性上

<legend title="form">title</legend>

1.2 插值表达

插值表达采用{{}}的方式来表示,将组件中对应的表达式的值绑定到模板中进行显示,例如如下,将msg表达式的值在组件中显示

<span class="label label-warning">attention:{{msg}}</span>

1.3 属性绑定

属性绑定采用[]的方式来表示,将表达式的值绑定在对应的属性上,例如,将组件中name表达式得值绑定到属性placeholder 中

<div class="input-group">
<div class="input-group-addon">name</div>
<input type="text" class="form-control" id="name" name="name" [placeholder]="name">
</div>

当属性绑定的元素中存在对应的属性的时候可以直接采用[xx]进行绑定,但是,当元素上不存在对应的属性的时候,必须采用[attr.xxx]这样atrr在加上一个点的方式来绑定对应的属性信息。

<div class="input-group">
<div class="input-group-addon">name</div>
<input type="text" class="form-control" id="name" name="name" [attr.size]="size" [placeholder]="name">
</div>

1.4 样式绑定

样式绑定主要包括两个方便,内联样式style及外部样式class绑定。

1.4.1 Style绑定

style绑定在语法上类似于属性绑定。但方括号中的部分不是一个元素的属性名,而是包括一个 style 前缀,紧跟着一个点 (.) ,再跟着 CSS 样式的属性名。表示在指定的元素上使用该属性,形如: [style.style-perporty]。例如

<div class="form-group">
<div class="col-sm-10 col-sm-offset-2" [style.color]="color">
<button type="submit" class="btn btn-primary" [class.btn-primary]="isPrimary">Submit</button>
</div>
</div>

1.4.2 Class绑定

CSS 类绑定在语法上类似于属性绑定。但方括号中的部分不是一个元素的属性名,而是包括一个 class 前缀,紧跟着一个点 (.) ,再跟着 CSS 类的名字组成,形如: [class.class-name]。表示是否在该元素上使用该css类或者移除该css类,后面的值为true的话表使用,false表示移除

<div class="form-group">
<div class="col-sm-10 col-sm-offset-2" [style.color]="color">
<button type="submit" class="btn btn-primary" [class.btn-primary]="isPrimary">Submit</button>
</div>
</div>

1.5 * 与 <template>

首先我们来看一个 * 与 <template> 的例子,

<div class="input-group" *ng-if="needpwd">
<div class="input-group-addon">pwd</div>
<input type="password" class="form-control" [(ngModel)]="pwd" id="pwd" name="pwd">
</div>

* 是一种语法糖,让那些需要借助模板来修改 HTML 布局的指令更易于读写。NgFor、NgIf 和 NgSwitch 都会添加或移除元素子树,这些元素子树被包裹在 <template> 标签中。使用 * 前缀语法让我们忽略<template>标签,还原后的代码如下所示

<template [ngIf]="needpwd">
<div class="input-group">
<div class="input-group-addon">pwd</div>
<input type="password" class="form-control" [(ngModel)]="pwd" id="pwd" name="pwd">
</div>
</template>

1.6 局部变量

局部变量采用#xxx的方式来表示,在元素上使用该表达式的话则可以使用xxx来代表该元素,可以在同一元素、兄弟元素或任何子元素中使用局部变量。如下所示,可以在兄弟节点使用该变量代表该元素

<div class="input-group" *ng-if="needpwd">
<div class="input-group-addon">pwd</div>
<input #inPwd type="password" class="form-control" [(ngModel)]="pwd" id="pwd" name="pwd">
<button type="button" class="btn btn-warning" (click)="show(inPwd.value)">warn</button>
</div>

1.7 事件绑定

属性绑定采用()的方式来表示,将组件的方法绑定到对应的事件上,例如,将change函数绑定到change事件中,当change事件发生时会触发change函数。

<div class="input-group">
<div class="input-group-addon">age</div>
<input type="text" class="form-control" (change)="change()" id="age" name="age" [placeholder]="age">
</div>

1.8 双向绑定

双向绑定使用[()]的方式来表示,双向绑定是属性绑定与事件绑定的结合体。最常用的双向绑定是使用[(ngModel)]=”xxx”在表单中进行使用,修改表单中数据的时候会修改绑定的数据项。如下所示:当表单输入修改时,sex变量也会同步修改

<div class="input-group">
<div class="input-group-addon">sex</div>
<input type="text" class="form-control" [(ngModel)]="sex" id="sex" name="sex" [placeholder]="sex">
</div>

以上所述是小编给大家介绍的Angular2 模板语法的相关知识,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的,在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
按下Enter焦点移至下一个控件的实现js代码
Dec 11 Javascript
javascript中if和switch,==和===详解
Jul 30 Javascript
CSS或者JS实现鼠标悬停显示另一元素
Jan 22 Javascript
Easyui的组合框的取值与赋值
Oct 28 Javascript
利用ES6语法重构React组件详解
Mar 02 Javascript
JS实现图片预览的两种方式
Jun 27 Javascript
简述JS浏览器的三种弹窗
Jul 15 Javascript
vue--点击当前增加class,其他删除class的方法
Sep 15 Javascript
创建echart多个联动的示例代码
Nov 23 Javascript
countup.js实现数字动态叠加效果
Oct 17 Javascript
layui前端时间戳转化实例
Nov 15 Javascript
js构造函数constructor和原型prototype原理与用法实例分析
Mar 02 Javascript
JS上传图片预览插件制作(兼容到IE6)
Aug 07 #Javascript
JavaScript兼容性总结之获取非行间样式案例
Aug 07 #Javascript
jQuery调用Webservice传递json数组的方法
Aug 06 #Javascript
Google 地图API Map()构造器详解
Aug 06 #Javascript
Google 地图API资料整理及详细介绍
Aug 06 #Javascript
jquery自动补齐功能插件flexselect用法示例
Aug 06 #Javascript
Google 地图类型详解及示例代码
Aug 06 #Javascript
You might like
php读取目录所有文件信息dir示例
2014/03/18 PHP
php可应用于面包屑导航的迭代寻找家谱树实现方法
2015/02/02 PHP
php+html5使用FormData对象提交表单及上传图片的方法
2015/02/11 PHP
[全兼容哦]--实用、简洁、炫酷的页面转入效果loing
2007/05/07 Javascript
javascript div 弹出可拖动窗口
2009/02/26 Javascript
JavaScript 验证浏览器是否支持javascript的方法小结
2009/05/17 Javascript
根据一段代码浅谈Javascript闭包
2010/12/14 Javascript
JavaScript利用构造函数和原型的方式模拟C#类的功能
2014/03/06 Javascript
javascript中call,apply,bind的用法对比分析
2015/02/12 Javascript
详解原生JavaScript实现jQuery中AJAX处理的方法
2016/05/10 Javascript
关于动态生成dom绑定事件失效的原因及解决方法
2016/08/06 Javascript
AngularJS ngModel实现指令与输入直接的数据通信
2016/09/21 Javascript
BootStrap实现轮播图效果(收藏)
2016/12/30 Javascript
详解NodeJs支付宝移动支付签名及验签
2017/01/06 NodeJs
ionic 自定义弹框效果
2017/06/27 Javascript
vuex的使用及持久化state的方式详解
2018/01/23 Javascript
webpack优化的深入理解
2018/12/10 Javascript
详解Vue源码中一些util函数
2019/04/24 Javascript
微信小程序动态显示项目倒计时
2019/06/20 Javascript
javascript 代码是如何被压缩的示例代码
2020/05/06 Javascript
在Python的Django框架上部署ORM库的教程
2015/04/20 Python
python显示生日是星期几的方法
2015/05/27 Python
利用Python如何生成hash值示例详解
2017/12/20 Python
Python小进度条显示代码
2019/03/05 Python
pandas DataFrame索引行列的实现
2019/06/04 Python
python多进程并发demo实例解析
2019/12/13 Python
python 判断一组数据是否符合正态分布
2020/09/23 Python
Charles & Colvard官网:美国莫桑石品牌
2019/06/05 全球购物
森马旗舰店双十一营销方案
2014/09/29 职场文书
小升初自荐信怎么写
2015/03/26 职场文书
2015年仓库管理工作总结
2015/05/25 职场文书
2015党建工作简报
2015/07/21 职场文书
描述鲁迅的名言整理,一生受用
2019/08/08 职场文书
小程序实现筛子抽奖
2021/05/26 Javascript
Win11无法访问设备和打印机 如何解决页面空白
2022/04/09 数码科技
Linux中一对多配置日志服务器的详细步骤
2022/07/23 Servers