Angular 2模板语法

模板扮演的是一个视图的角色，简单讲就是展示给用户看的部分。

• HTML
• 插值表达式
• 模板表达式
• 模板语句
• 绑定语法
• 属性绑定
• HTML属性、class和style绑定
• 事件绑定
• 使用ngModel进行双向数据绑定
• 内置指令
• *与<template>
• 模板引用变量
• 输入输出属性
• 模板表达式操作符

1.HTML

HTML是Angular模板的"语言"，除了<script>元素是被禁用的外，其他HTML元素都是支持的。

<h1>我的第一个Angular应用</h1>

2.插值表达式

插值表达式的语法格式为：{{...}} 

插值表达式可以把计算的字符插入HTML中，也可以作为属性值来使用。

<h3>
{{title}}
<img src="{{imageUrl}}" style="height:30px">
</h3>

3.模板表达式

{{...}}里头其实就是一个模板表达式，Angular会对其进行求知并转化成字符串输出。

以下实例是两个数相加：

<!-- "the sum of 1+1 is 2"-->
<p> the sum of 1 + 1 is {{1+1}}</p>

我们可以使用getVal()来获取这个表达式的值。

模板表达式类似JavaScript的语言，很多JavaScript表达式也是合法的模板表达式，但不是全部。

以下JavaScript表达式是禁止的：

• 赋值表达式（=，+=，-=...）
• new表达式
• 自增和自减操作

4.模板语句

5.绑定语法

6.属性绑定

模板的属性绑定可以把视图元素的属性设置为模板表达式。

最常用的属性绑定是把元素的属性设置为组件中属性的值。下面这个例子中，image元素的src属性会被绑定到组件的imageUrl属性上：

<img [src]="imageUrl">

 

当组件为isUnchanged(未改变)时禁用一个按钮：

<button [disabled]="isUnChanged">按钮是禁用的</button>

 

设置指令的属性

<div [ngClass]="classes">[ngClass]绑定到classes属性</div>

 

设置一个自定义组件的属性（这是父子组件间通讯的重要途径）

<user-detail [user]="currentUser"></user-detail>

7.HTML属性、class和style绑定

8.事件绑定

在事件绑定中，Angular通过监听用户动作，比如键盘事件、鼠标事件、触屏事件等来响应相对应的数据流向-从视图目标到数据源。

事件绑定的语法是由等号左侧小括号内的目标事件和右侧引号中的模板声明组成。

比如下面这个例子，是时间绑定监听按钮的点击事件。只要点击鼠标，都会调用组件的onSave()方法。

<button (click)="onSave()">保存</button>

 

圆括号中的名称-----比如（click）-----标记出了目标事件。

9.使用NgModel进行双向数据绑定

当开发数据输入表单时，期望的结果是既能将组件的数据显示到表单上，也能在用户修改时更新组件的数据。

以下是一个通过[(ngModel)]来实现双向绑定的例子：

<input [(ngModel)]="current.firstName">

 

[]实现了数据流从组件到模板，()了数据流到模板到组件，两者一结合[()]就实现了双向绑定。

使用前缀形式的语法：

<input bindon-ngModel="currentUser.firstName">

10.内置指令

Angular的内置指令有NgClass、NgStyle、NgIf、NgFor、NgSwitch等。

• NgClass

通过绑定到NgClass动态添加或删除css类。

<div [style.font-size]="isSpecial ? 'x-large' : 'smaller'">这个div是大号的</div>

• NgStyle

NgStyle通过把它绑定到一个key:value控制对象的形式，可以让我们同时设置很多内联样式。

通过添加一个NgStyle属性绑定，让它调用setStyles，并据此来设置元素的样式：

<div [ngStyle]="setStyles()">
   这个div的样式是italic,normal weight,和extra large（24px）。
</div>

• NgIf

通过把NgIf指令绑定到一个真值表达式，可以把一个元素及其子元素添加到DOM树上。

<div *ngIf="currentUser">Hello,{{currentUser.firstName}}</div>

相反，绑定到一个假值表达式将从DOM树移除该元素及其子元素。

<!--因为isActive的值为false-->
<user-detail *ngIf="isActive"></user-detail>

• NgFor
• NgSwitch

当需要从一组可能的元素树中根据条件显示其中一个时，就需要NgSwitch了。Angular将只把选中的元素添加到DOM中。如：

<span [ngSwitch]="userName">
  <span *ngSwitchCase="'张三'">张三</span>
  <span *ngSwitchCase="'李四'">李四</span>
  <span *ngSwitchCase="'王五'">王五</span>
  <span *ngSwitchCase="'赵六'">赵六</span>
  <span *ngSwitchDefault>龙大</span>
</span>

• 11.*与<template>

12.模板引用变量

13.输入输出属性

14.模板表达式操作符