深入理解Angular2 模板语法

更新时间：2016年08月07日 09:33:23 作者：S&L·chuck

这篇文章主要介绍了Angular2 模板语法的相关资料,非常不错，感兴趣的朋友一起学习吧，需要的朋友可以参考下

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 模板语法的相关知识，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的，在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

angular4中*ngFor不能对返回来的对象进行循环的解决方法
今天小编就为大家分享一篇angular4中*ngFor不能对返回来的对象进行循环的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
AngularJs点击状态值改变背景色的实例
下面小编就为大家分享一篇AngularJs点击状态值改变背景色的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2017-12-12
最棒的Angular2表格控件
最好的Angular2表格控件，满足更小、更快、更熟悉的基本要求，感兴趣的小伙伴们可以参考一下
2016-08-08
AngularJS HTML编译器介绍
这篇文章主要介绍了AngularJS HTML编译器介绍,AngularJS的HTML编译器能让浏览器识别新的HTML语法。它能让你将行为关联到HTML元素或者属性上，甚至能让你创造具有自定义行为的新元素,需要的朋友可以参考下
2014-12-12
AngularJS入门教程之表单校验用法示例
这篇文章主要介绍了AngularJS表单校验用法,结合实例形式分析了AngularJS各种常见的表单校验功能及使用技巧,需要的朋友可以参考下
2016-11-11
Angular实现表格自滚动效果
这篇文章主要为大家介绍了如何通过Angular实现表格自动滚动的效果，文中的示例代码讲解详细，对我们学习Angular有一定帮助，需要的可以参考一下
2022-01-01
Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍
这篇文章主要给大家介绍了Angularjs中ng-repeat-start与ng-repeat-end的用法，文章开始先进行了简单的介绍，而后通过完整的实例代码详细给大家介绍这两者的用法，有需要的朋友们可以参考借鉴，下面来一起看看吧。
2016-12-12
分享Angular http interceptors 拦截器使用(推荐)
AngularJS 是一个 JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面。这篇文章主要介绍了分享Angular http interceptors 拦截器使用(推荐),需要的朋友可以参考下
2019-11-11
详解angularJS+Ionic移动端图片上传的解决办法
本篇文章主要介绍了详解angularJS+Ionic移动端图片上传的解决办法，具有一定的参考价值，有需要的可以了解一下
2017-09-09
详解angularJS自定义指令间的相互交互
本篇文章主要介绍了详解angularJS自定义指令间的相互交互，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-07-07