Angular 2 模板语法概述

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>