深入理解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 相关文章推荐
IE JS编程需注意的内存释放问题
Jun 23 Javascript
JavaScript 异步调用框架 (Part 3 - 代码实现)
Aug 04 Javascript
javascript事件问题
Sep 05 Javascript
在多个页面使用同一个HTML片段的代码
Mar 04 Javascript
JS获取URL中的参数数据
Dec 05 Javascript
jquery实现tr元素的上下移动示例代码
Dec 20 Javascript
深入解析JavaScript编程中的this关键字使用
Nov 09 Javascript
jquery中用jsonp实现搜索框功能
Oct 18 Javascript
Bootstrap图片轮播效果详解
Oct 17 Javascript
Vuejs+vue-router打包+Nginx配置的实例
Sep 20 Javascript
JS合并两个数组的3种方法详解
Oct 24 Javascript
vue Tab切换以及缓存页面处理的几种方式
Nov 05 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下mysql数据库操作类(改自discuz)
2010/07/03 PHP
javascript 同时在IE和FireFox获取KeyCode的代码
2010/02/07 Javascript
AppBaseJs 类库 网上常用的javascript函数及其他js类库写的
2010/03/04 Javascript
JQuery AJAX提交中文乱码的解决方案
2010/07/02 Javascript
在ASP.NET中使用JavaScript脚本的方法
2013/11/12 Javascript
JavaScript类型系统之基本数据类型与包装类型
2016/01/06 Javascript
JS深度拷贝Object Array实例分析
2016/03/31 Javascript
jQuery页面加载初始化的3种方法(推荐)
2016/06/02 Javascript
用AngularJS来实现监察表单按钮的禁用效果
2016/11/02 Javascript
jQuery学习笔记之入门
2016/12/14 Javascript
Vue 单文件中的数据传递示例
2017/03/21 Javascript
vue中路由参数传递可能会遇到的坑
2017/12/07 Javascript
初探Vue3.0 中的一大亮点Proxy的使用
2018/12/06 Javascript
微信小程序第三方框架对比 之 wepy / mpvue / taro
2019/04/10 Javascript
layui的表单验证支持ajax判断用户名是否重复的实例
2019/09/06 Javascript
JS中的继承操作实例总结
2020/06/06 Javascript
介绍Python中的__future__模块
2015/04/27 Python
python实现class对象转换成json/字典的方法
2016/03/11 Python
利用Anaconda完美解决Python 2与python 3的共存问题
2017/05/25 Python
Python列表删除的三种方法代码分享
2017/10/31 Python
python 将md5转为16字节的方法
2018/05/29 Python
记一次python 内存泄漏问题及解决过程
2018/11/29 Python
对pandas将dataframe中某列按照条件赋值的实例讲解
2018/11/29 Python
对Pycharm创建py文件时自定义头部模板的方法详解
2019/02/12 Python
解决django后台样式丢失,css资源加载失败的问题
2019/06/11 Python
python+selenium定时爬取丁香园的新型冠状病毒数据并制作出类似的地图(部署到云服务器)
2020/02/09 Python
解决Jupyter Notebook开始菜单栏Anaconda下消失的问题
2020/04/13 Python
30行Python代码实现高分辨率图像导航的方法
2020/05/22 Python
利用python实现平稳时间序列的建模方式
2020/06/03 Python
Python小白学习爬虫常用请求报头
2020/06/03 Python
Keras: model实现固定部分layer,训练部分layer操作
2020/06/28 Python
python 实现汉诺塔游戏
2020/11/28 Python
Python 中Operator模块的使用
2021/01/30 Python
新西兰便宜隐形眼镜购买网站:QUICKLENS New Zealand
2019/03/02 全球购物
我们的节日国庆活动方案
2014/08/19 职场文书
2014教师年度工作总结
2014/11/10 职场文书