深入理解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 相关文章推荐
jquery 得到当前页面高度和宽度的两个函数
Feb 21 Javascript
拥抱模块化的JavaScript
Mar 07 Javascript
Javascript中的delete介绍
Sep 02 Javascript
node.js中的require使用详解
Dec 15 Javascript
JS实现3D图片旋转展示效果代码
Sep 22 Javascript
angular源码学习第一篇 setupModuleLoader方法
Oct 20 Javascript
JQuery学习总结【一】
Dec 01 Javascript
laravel5.3 vue 实现收藏夹功能实例详解
Jan 21 Javascript
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
Nov 30 Javascript
vue实现随机验证码功能(完整代码)
Dec 10 Javascript
微信小程序wxs实现吸顶效果
Jan 08 Javascript
JS使用for in有序获取对象数据
May 19 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
Zerg兵种介绍
2020/03/14 星际争霸
php中opendir函数用法实例
2014/11/15 PHP
php短网址和数字之间相互转换的方法
2015/03/13 PHP
PHP+Mysql+jQuery查询和列表框选择操作实例讲解
2015/10/22 PHP
WordPress中用于获取及自定义头像图片的PHP脚本详解
2015/12/17 PHP
PHP利用二叉堆实现TopK-算法的方法详解
2017/04/24 PHP
用js实现的检测浏览器和系统的函数
2009/04/09 Javascript
JavaScript Date对象 日期获取函数
2010/12/19 Javascript
javascript对数组的常用操作代码 数组方法总汇
2011/01/27 Javascript
jQuery 无限级菜单的简单实例
2014/02/21 Javascript
JavaScript中的anchor()方法使用详解
2015/06/08 Javascript
jquery.cookie实现的客户端购物车操作实例
2015/12/24 Javascript
Js得到radiobuttonlist选中值的两种方法(推荐)
2016/08/25 Javascript
利用JS屏蔽页面中的Enter按键提交表单的方法
2016/11/25 Javascript
React Native基础入门之初步使用Flexbox布局
2018/07/02 Javascript
解决Vue2.0 watch对象属性变化监听不到的问题
2018/09/11 Javascript
使用vue3重构拼图游戏的实现示例
2021/01/25 Vue.js
Python采用Django开发自己的博客系统
2020/09/29 Python
Python Unittest自动化单元测试框架详解
2018/04/04 Python
使用python读取csv文件快速插入数据库的实例
2018/06/21 Python
python+numpy+matplotalib实现梯度下降法
2018/08/31 Python
使用Py2Exe for Python3创建自己的exe程序示例
2018/10/31 Python
Python3爬虫爬取英雄联盟高清桌面壁纸功能示例【基于Scrapy框架】
2018/12/05 Python
Python 利用pydub库操作音频文件的方法
2019/01/09 Python
在Python中如何传递任意数量的实参的示例代码
2019/03/21 Python
如何运行.ipynb文件的图文讲解
2019/06/27 Python
python 动态迁移solr数据过程解析
2019/09/04 Python
Python 下载及安装详细步骤
2019/11/04 Python
收集的22款给力的HTML5和CSS3帮助工具
2012/09/14 HTML / CSS
聪明的粉丝购买门票的地方:TickPick
2018/03/09 全球购物
酷瑞网络科技面试题
2012/03/30 面试题
实习生自我评价
2014/01/18 职场文书
幼师自我鉴定
2014/02/01 职场文书
第二课堂活动总结
2014/05/07 职场文书
未婚证明格式
2015/06/15 职场文书
python实现自定义日志的具体方法
2021/05/28 Python