首页 > 代码库 > AngularJS2 模板语法

AngularJS2 模板语法

1. HTML
HTML 是 Angular 模板的"语言",除了 <script> 元素是被禁用的外 ,其他 HTML 元素都是支持的。
2. 插值表达式
插值表达式的语法格式为:{{ ... }}
插值表达式可以把计算的字符串插入HTML中,也可以作为属性值来使用。
<h3>
  {{title}}
  <img src=http://www.mamicode.com/"{{imageUrl}}" style="height:30px">>3. 模板表达式
{{ ... }} 里头其实就是一个模板表达式,Angular 会对其进行求值并转化为字符串输出。
模板表达式类似 JavaScript 的语言,很多 JavaScript 表达式也是合法的模板表达式,但不是全部。
以下 JavaScript 表达式是禁止的:
  • 赋值表达式(=,+=,-=...)
  • new操作符
  • 带有;或者‘的连接表达式
  • 自增和自减操作(++和--) 
其他与Javascript语法不同的值得注意的包括:
  • 不支持位运算符(|和&)
  • 模板表达式的操作符,如|和?.等,被赋予了新的含义
4. 属性绑定
模板的属性绑定可以把视图元素的属性设置为模板表达式。
设置元素的属性:<img [src]="imageUrl">
设置指令的属性:<div [ngClass]="classes">[ngClass]绑定到classes 属性</div>
设置一个自定义组件的属性(这是父子组件间通讯的重要途径):
<user-detail [user]="currentUser"></user-detail>
5. HTML 属性(Attribute)、 class 和 style 绑定
(1)属性绑定
当元素没有属性可绑的时候,使用HTML标签属性(Attribute)绑定。
<table border=1>
  <tr><td [attr.colspan]="1 + 1">One-Two</td></tr>
  <tr><td>Five</td><td>Six</td></tr>
</table>
(2)CSS类绑定
CSS 类绑定在语法上类似于属性绑定。但方括号中的部分不是一个元素的属性名,而是包括一个 class 前缀,紧跟着一个点 (.) ,再跟着 CSS 类的名字组成。 其中后两部分是可选的。例如: [class.class-name]
<!-- 标准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>
(3)style样式绑定
通过样式绑定,可以设置内联样式。语法:[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>
6. 事件绑定
事件绑定的语法是由等号左侧小括号内的 目标事件 和右侧引号中的模板声明 组成。
注意:左侧圆括号也可以使用on- 前缀的形式。
7. 使用 NgModel 进行双向数据绑定
通过 [(NgModel)]来实现双向绑定示例:
<input [(ngModel)]="currentUser.firstName">
[]实现了数据流从组件到模板,()实现了数据流从模板到组件,两者一结合[()]就实现了双向绑定。
使用前缀形式的语法:<input bindon-ngModel="currentUser.firstName">
8. 内置指令
Angular 的内置指令有 NgClass、NgStyle、NgIf、NgFor、NgSwitch等。
(1)NgClass
通过绑定到 NgClass 动态添加或删除 CSS 类。
(2)NgStyle
NgStyle 通过把它绑定到一个key:value控制对象的形式,可以让我们同时设置很多内联样式。
setStyles() {
  let styles = {
    // CSS属性名
    ‘font-style‘:  this.canSave      ? ‘italic‘ : ‘normal‘,  // italic
    ‘font-weight‘: !this.isUnchanged ? ‘bold‘   : ‘normal‘,  // normal
    ‘font-size‘:   this.isSpecial    ? ‘24px‘   : ‘8px‘,     // 24px
  };
  return styles;
}
通过添加一个NgStyle属性绑定,让它调用setStyles,并据此来设置元素的样式:
<div [ngStyle]="setStyles()">
    这个div的样式是italic, normal weight, 和extra large (24px)。
</div>
(3)NgIf
通过把NgIf指令绑定到一个真值表达式,可以把一个元素及其子元素添加到DOM树上。
<div *ngIf="currentUser">Hello,{{currentUser.firstName}}</div>
(4)NgSwitch
当需要从一组可能的元素树中根据条件显示其中一个时,就需要NgSwitch了。Angular将只把选中的元素添加进DOM中。如:
<span [ngSwitch]="userName">
  <span *ngSwitchCase="‘张三‘">张三</span>
  <span *ngSwitchCase="‘李四‘">李四</span>
  <span *ngSwitchCase="‘王五‘">王五</span>
  <span *ngSwitchCase="‘赵六‘">赵六</span>
  <span *ngSwitchDefault>龙大</span>
</span>
(5)NgFor
当需要展示一个由多个条目组成的列表时就需要NgFor指令了。
<div *ngFor="let user of users">{{user.fullName}}</div>
ngFor指令支持一个可选的index索引,在迭代过程中会从0增长到数组中的长度。
<div *ngFor="let user of users; let i=index">{{i + 1}} - {{user.fullName}}</div>
(6)NgForTrackBy
ngFor 指令有时候会性能较差,特别是在大型列表中。如对一个条目的一点小更改、移除或添加,都会导致级联的 DOM 操作。
通过追踪函数解决这个问题:
trackByUsers(index: number, user: User){return user.id}
然后把NgForTrackBy指令设置为那个追踪函数:
<div *ngFor="let user of users; trackBy:trackByUsers">({{user.id}}) {{user.fullName}}</div>
追踪函数不会排除所有DOM更改。如果用来判断是否为同一个联系人的属性变化了,就会更新DOM元素,反之就会留下这个DOM元素。列表界面就会变得比较更加平滑,具有更好的响应效果。
9. 模板引用变量
模板引用变量是模板中对 DOM 元素或指令的引用。
<!-- phone 引用了 input 元素,并将 `value` 传递给事件句柄 -->
<input #phone placeholder="phone number">
<button (click)="callPhone(phone.value)">Call</button>
 
<!-- fax 引用了 input 元素,并将  `value` 传递给事件句柄  -->
<input ref-fax placeholder="fax number">
<button (click)="callFax(fax.value)">Fax</button>


AngularJS2 模板语法