Angular 2 模板语法概述

Angular 2 的模板语法基于 HTML，并扩展了动态绑定、指令和组件交互的功能。模板是 Angular 应用的核心部分，用于定义用户界面。

使用双大括号 {``{ }} 绑定组件属性到模板：

html 复制代码

<p>{{ title }}</p>

插值支持表达式运算，如 {``{ 1 + 1 }} 或调用组件方法 {``{ getValue() }}。

使用方括号 [] 绑定组件属性到 HTML 元素的属性：

html 复制代码

<img [src]="imageUrl" [alt]="imageAlt">

动态绑定适用于原生属性或自定义属性。

使用圆括号 () 监听 DOM 事件并触发组件方法：

html 复制代码

<button (click)="onClick()">Click Me</button>

支持传递事件对象 $event 到方法中。

结合 [()] 语法实现双向数据绑定，通常与 ngModel 指令配合使用：

html 复制代码

<input [(ngModel)]="userName">

需导入 FormsModule 模块以启用双向绑定功能。

Angular 提供内置指令控制模板逻辑和渲染：

结构型指令 （如 *ngIf、*ngFor）：

html 复制代码

<div *ngIf="isVisible">Content</div>
<li *ngFor="let item of items">{{ item }}</li>

属性型指令 （如 ngClass、ngStyle）：
html 复制代码
```
<div [ngClass]="{ 'active': isActive }"></div>
```

使用 # 创建模板局部变量，引用 DOM 元素或组件实例：

html 复制代码

<input #inputRef (keyup)="onKeyUp(inputRef.value)">

管道用于格式化模板中的数据，语法为 |：

html 复制代码

<p>{{ today | date:'yyyy-MM-dd' }}</p>

内置管道包括 date、uppercase、json 等，支持自定义管道。

使用 ?. 避免属性路径为空时引发的错误：

html 复制代码

<p>{{ user?.name }}</p>

动态绑定内联样式或类：

html 复制代码

<div [style.color]="textColor">Text</div>
<div [class.highlight]="isHighlighted">Content</div>

避免在模板中编写复杂逻辑，建议将逻辑移至组件类。
模板语法仅支持表达式，不支持语句（如赋值、new 等）。
使用 ngNonBindable 忽略模板中的绑定语法：
html 复制代码
```
<div ngNonBindable>{{ ThisWillNotBind }}</div>
```