深入理解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 相关文章推荐
JavaScript 数组运用实现代码
Apr 13 Javascript
javascript学习笔记(三)显示当时时间的代码
Apr 08 Javascript
原生js编写设为首页兼容ie、火狐和谷歌
Jun 05 Javascript
jQuery实现图片渐入渐出切换展示效果
Aug 15 Javascript
js实现iPhone界面风格的单选框和复选框按钮实例
Aug 18 Javascript
js中window.open的参数及注意注意事项
Jul 06 Javascript
浅谈jQuery效果函数
Sep 16 Javascript
Vue中定义全局变量与常量的各种方式详解
Aug 23 Javascript
vue-better-scroll 的使用实例代码详解
Dec 03 Javascript
微信小程序mpvue点击按钮获取button值的方法
May 29 Javascript
JavaScript实现简单的计算器
Jan 16 Javascript
javascript实现前端分页功能
Nov 26 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代码(抓取网页中的邮箱地址)
2012/07/17 PHP
php密码生成类实例
2014/09/24 PHP
PHP获取当前所在目录位置的方法
2014/11/26 PHP
php常用字符函数实例小结
2016/12/29 PHP
浅析PHP反序列化中过滤函数使用不当导致的对象注入问题
2020/02/15 PHP
javascript 面向对象思想 附源码
2009/07/07 Javascript
showModalDialog在谷歌浏览器下会返回Null的解决方法
2013/11/27 Javascript
使用ajaxfileupload.js实现ajax上传文件php版
2014/06/26 Javascript
简介JavaScript中setUTCSeconds()方法的使用
2015/06/12 Javascript
jquery实现图片上传之前预览的方法
2015/07/11 Javascript
JavaScript数组去重的五种方法
2015/11/05 Javascript
javascript如何写热点图
2015/12/08 Javascript
jQuery选择器用法实例详解
2015/12/17 Javascript
浅析AngularJS中的指令
2016/03/20 Javascript
AngularJS中isolate scope的用法分析
2016/11/22 Javascript
详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
2017/06/17 Javascript
原生JS实现移动端web轮播图详解(结合Tween算法造轮子)
2017/09/10 Javascript
如何换个角度使用VUE过滤器详解
2019/09/11 Javascript
浅谈layui 数据表格前后台传值的问题
2019/09/12 Javascript
ant design pro中可控的筛选和排序实例
2020/11/17 Javascript
js实现简单的轮播图效果
2020/12/13 Javascript
python集合用法实例分析
2015/05/30 Python
Python之文字转图片方法
2018/05/10 Python
利用Python如何实现数据驱动的接口自动化测试
2018/05/11 Python
读取json格式为DataFrame(可转为.csv)的实例讲解
2018/06/05 Python
pytorch中的自定义数据处理详解
2020/01/06 Python
Pytorch学习之torch用法----比较操作(Comparison Ops)
2020/06/28 Python
网购亚洲时装、美容产品和生活百货:YesStyle
2016/09/15 全球购物
写clone()方法时,通常都有一行代码,是什么?
2012/10/31 面试题
大学生实习思想汇报
2014/01/12 职场文书
24岁生日感言
2014/01/13 职场文书
创建青年文明号材料
2014/05/09 职场文书
村长反四风问题个人对照检查材料
2014/09/21 职场文书
作风整顿个人剖析材料
2014/10/06 职场文书
读后感作文评语
2014/12/25 职场文书
小学英语新课改心得体会
2016/01/22 职场文书