Angular 2 模板语法

Angular 2 模板语法前面几个章节我们已经接触了 Angular 的模板，本文我们将具体介绍 Angular 的语法使用。模板扮演的是一个视图的角色，简单讲就是展示给用户看的部分。HTML插值表达式模板表达式模板语句绑定语法属性绑定HTML 属性、 class 和 style 绑定事件绑定使用 NgModel 进行双向数据绑定内置指令* 与 <template>模板引用变量输入输出属性模板表达式操作符HTMLHTML 是 Angular 模板的"语言"，除了 <script> 元素是被禁用的外 ，其他 HTML 元素都是支持的，例如：<h1>我的第一个 Angular 应用</h1>插值表达式插值表达式的语法格式为：{{ ... }}。插值表达式可以把计算的字符串插入HTML中，也可以作为属性值来使用。<h3>{{title}}<img src="{{imageUrl}}" style="height:





30px"></h3>模板表达式{{ ... }} 里头其实就是一个模板表达式，Angular 会对其进行求值并转化为字符串输出。以下实例是两个数相加：<!-- "The sum of 1 + 1 is 2" --><p>The sum of 1 + 1 is {{1 + 1}}</p>我们可以使用 getVal() 来获取这个表达式的值：<div class="example"><div class="example_code">[mycode3 type="html"]<!-- "4" --><p>{{1 + 1 + getVal()}}</p>模板表达式类似 JavaScript 的语言，很多 JavaScript 表达式也是合法的模板表达式，但不是全部。以下 JavaScript 表达式是禁止的：赋值表达式（=，+=，-=...）new操作符带有;或者'的连接表达式自增和自减操作（++和--）其他与Javascript语法不同的值得注意的包括：不支持位运算符（|和&）模板表达式的操作符，如|和?.等，被赋予了新的含义属性绑定模板的属性绑定可以把视图元素的属性设置为模板表达式 。最常用的属性绑定是把元素的属性设置为组件中属性的值。 下面这个例子中， image 元素的 src 属性会被绑定到组件的 imageUrl 属性上：<img [src]="imageUrl">当组件为 isUnchanged( 未改变 ) 时禁用一个按钮：<button [disabled]="isUnchanged">按钮是禁用的</button>设置指令的属性：<div [ngClass]="classes">[ngClass]绑定到classes 属性</div>设置一个自定义组件的属性（这是父子组件间通讯的重要途径）：<user-detail [user]="currentUser"></user-detail>HTML 属性(Attribute)、 class 和 style 绑定模板语法为那些不太适合使用属性绑定的场景提供了专门的单向数据绑定形式。属性(Attribute)、绑定当元素没有属性可绑的时候，使用HTML标签属性(Attribute)绑定。考虑 ARIA, SVG 和 table 中的 colspan/rowspan 等属性(Attribute) 。它们是纯粹的属性 。 它们没有对应的属性可供绑定。以下实例会报错：<tr><td colspan="{{1 + 1}}">Three-Four</td></tr>我们会得到这个错误：Template parse errors:





Can't bind to 'colspan' since it isn't a known native property模板解析错误：不能绑定到'colspan'，因为它不是已知的原生属性正如提示中所说， <td> 元素没有 colspan 属性。但是插值表达式和属性绑定只能设置 属性 ，而不是 Attribute，所以需HTML标签 Attribute 绑定来创建和绑定类似的Attribute。HTML标签特性绑定在语法上类似于属性绑定，但中括号中的部分不是一个元素的属性名，而是由一个attr.的前缀和HTML标签属性的名称组成，然后通过一个能求值为字符串的表达式来设置HTML标签属性的值。如：<table border=1><tr><td [attr.colspan]="1 + 1">One-Two</td></tr><tr><td>Five</td><td>Six</td></tr></table>css类绑定借助 CSS 类绑定 ，我们可以从元素的 class 属性上添加和移除 CSS 类名。CSS 类绑定在语法上类似于属性绑定。但方括号中的部分不是一个元素的属性名，而是包括一个 class 前缀，紧跟着一个点 (.) ，再跟着 CSS 类的名字组成。 其中后两部分是可选的。例如： [class.class-name] 。下面的例子展示了如何通过css类绑定类添加和移除"special"类：<!-- 标准HTML样式类设置 --><div class="bad curly special">Bad curly special</div><!-- 通过绑定重设或覆盖样式类 --><div class="bad curly special" [class]="badCurly">Bad curly</div><!-- 通过一个属性值来添加或移除special样式类 --><div [class.special]="isSpecial">这个样式比较特殊</div>style样式绑定通过样式绑定，可以设置内联样式。样式绑定语法上类似于属性绑定，但中括号里面的部分不是一个元素的属性名，样式绑定包括一个style.，紧跟着css样式的属性名，例如：[style.style-property]。<button [style.color] = "isSpecial ? 'red':





'green'">红色</button><button [style.background-color]="canSave ? 'cyan':





'grey'" >保存</button><!-- 带有单位的样式绑定 --><button [style.font-size.em]="isSpecial ? 3 :





1" >大</button><button [style.font-size.%]="!isSpecial ? 150 :





50" >小</button>样式属性可以是中线命名法（font-size），也可以是驼峰是命名法（fontSize）。事件绑定在事件绑定中，Angular通过监听用户动作，比如键盘事件、鼠标事件、触屏事件等来响应相对应的数据流向-从视图目标到数据源。事件绑定的语法是由等号左侧小括号内的 目标事件 和右侧引号中的 模板声明 组成。比如下面这个例子，是事件绑定监听按钮的点击事件。只要点击鼠标，都会调用组件的 onSave()方法。<button (click)="onSave()">保存</button>圆括号中的名称 ——比如 (click) ——标记出了目标事件。在下面这个例子中，目标是按钮的 click 事件。<button (click)="onSave()">Save</button>也可以使用on- 前缀的形式：<button on-click="onSave()">On Save</button>使用 NgModel 进行双向数据绑定当开发数据输入表单时，期望的结果是既能将组件的数据显示到表单上，也能在用户修改时更新组件的数据。以下是一个通过 [(NgModel)] 来实现双向绑定：<input [(ngModel)]="currentUser.firstName">[]实现了数据流从组件到模板，()实现了数据流从模板到组件，两者一结合[()]就实现了双向绑定。使用前缀形式的语法：<input bindon-ngModel="currentUser.firstName">内置指令Angular 的内置指令有 NgClass、NgStyle、NgIf、NgFor、NgSwitch等。NgClass通过绑定到 NgClass 动态添加或删除 CSS 类。<div [style.font-size]="isSpecial ? 'x-large' :





'smaller'" >这个div是大号的。</div>NgStyleNgStyle 通过把它绑定到一个key:





value控制对象的形式，可以让我们同时设置很多内联样式。setStyles() {let styles = {// CSS属性名'font-style':





this.canSav