Angular 2 模板语法概述
Angular 2 的模板语法基于 HTML，并扩展了动态绑定、指令和组件交互的功能。模板是 Angular 应用的核心部分，用于定义用户界面。
插值表达式
使用双大括号 {{ }} 绑定组件属性到模板：
<p>{{ title }}</p>
插值支持表达式运算，如 {{ 1 + 1 }} 或调用组件方法 {{ getValue() }}。
属性绑定
使用方括号 [] 绑定组件属性到 HTML 元素的属性：
<img [src]="imageUrl" [alt]="imageAlt">
动态绑定适用于原生属性或自定义属性。
事件绑定
使用圆括号 () 监听 DOM 事件并触发组件方法：
<button (click)="onClick()">Click Me</button>
支持传递事件对象 $event 到方法中。
双向绑定
结合 [()] 语法实现双向数据绑定，通常与 ngModel 指令配合使用：
<input [(ngModel)]="userName">
需导入 FormsModule 模块以启用双向绑定功能。
指令
Angular 提供内置指令控制模板逻辑和渲染：
- 结构型指令（如 *ngIf、*ngFor）：
<div *ngIf="isVisible">Content</div>
<li *ngFor="let item of items">{{ item }}</li> - 属性型指令（如 ngClass、ngStyle）：
<div [ngClass]="{ 'active': isActive }"></div>
模板引用变量
使用 # 创建模板局部变量，引用 DOM 元素或组件实例：
<input #inputRef (keyup)="onKeyUp(inputRef.value)">
管道
管道用于格式化模板中的数据，语法为 |：
<p>{{ today | date:'yyyy-MM-dd' }}</p>
内置管道包括 date、uppercase、json 等，支持自定义管道。
安全导航操作符
使用 ?. 避免属性路径为空时引发的错误：
<p>{{ user?.name }}</p>
样式绑定
动态绑定内联样式或类：
<div [style.color]="textColor">Text</div>
<div [class.highlight]="isHighlighted">Content</div>
注意事项
- 避免在模板中编写复杂逻辑，建议将逻辑移至组件类。
- 模板语法仅支持表达式，不支持语句（如赋值、new 等）。
- 使用 ngNonBindable 忽略模板中的绑定语法：
<div ngNonBindable>{{ ThisWillNotBind }}</div>
