Angular 2 模板语法

Angular 2 提供了一个强大的模板系统，允许开发者通过模板语法来动态生成 HTML 内容和绑定数据。模板语法主要包括数据绑定、指令、事件绑定等。

1. 数据绑定

数据绑定是 Angular 模板中的核心概念，它允许开发者在组件类和视图之间进行交互，确保视图的变化与数据的一致性。

1.1 双向数据绑定 (Two-way Data Binding)

双向数据绑定通过 [(ngModel)] 实现，即数据可以从组件到视图流动，也可以从视图到组件流动。

<input [(ngModel)]="username">
<p>Your username is {{ username }}</p>

[(ngModel)]：实现双向绑定。
{{ username }}：在视图中展示组件的属性值。

1.2 单向数据绑定 (One-way Data Binding)

1.2.1 插值表达式 (Interpolation)

插值表达式是通过 {{ }} 语法将数据绑定到视图中，数据会从组件流向视图。

<h1>{{ title }}</h1>

1.2.2 属性绑定 (Property Binding)

属性绑定通过 [property] 语法将数据绑定到 HTML 元素的属性上。

<img [src]="imageUrl">

[src]：将 imageUrl 绑定到 src 属性。

1.2.3 事件绑定 (Event Binding)

事件绑定通过 (event) 语法来监听事件并绑定到组件的相应方法。

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

(click)：监听点击事件，触发组件的 onClick() 方法。

1.3 属性和事件绑定结合

可以同时绑定属性和事件，比如在按钮点击时切换图片：

<button (click)="toggleImage()">Toggle Image</button>
<img [src]="imageUrl">

在组件中：

export class AppComponent {
  imageUrl = 'https://example.com/image1.jpg';

  toggleImage() {
    this.imageUrl = this.imageUrl === 'https://example.com/image1.jpg' 
      ? 'https://example.com/image2.jpg' 
      : 'https://example.com/image1.jpg';
  }
}

2. 指令

指令用于操作 DOM 元素，它们通过附加到元素上的特殊属性来改变其行为或样式。Angular 2 提供了多种内置指令，如 ngIf、ngFor 等。

2.1 结构型指令

结构型指令用于改变 DOM 结构，通常是添加或移除元素。

2.1.1 `ngIf`

ngIf 用于根据条件显示或隐藏 DOM 元素。

<div *ngIf="isVisible">This element is visible</div>

在组件中：

export class AppComponent {
  isVisible = true;
}

2.1.2 `ngFor`

ngFor 用于在 DOM 中循环渲染元素。

<ul>
  <li *ngFor="let item of items">{{ item }}</li>
</ul>

在组件中：

export class AppComponent {
  items = ['Item 1', 'Item 2', 'Item 3'];
}

2.2 属性型指令

属性型指令用于改变元素的外观或行为，通常通过元素的属性来实现。

2.2.1 `ngClass`

ngClass 用于动态地添加或移除 CSS 类。

<div [ngClass]="{ 'highlight': isHighlighted }">This is a highlighted text</div>

在组件中：

export class AppComponent {
  isHighlighted = true;
}

2.2.2 `ngStyle`

ngStyle 用于动态地改变元素的样式。

<div [ngStyle]="{ 'color': textColor }">This text is styled dynamically</div>

在组件中：

export class AppComponent {
  textColor = 'blue';
}

3. 管道 (Pipes)

Angular 提供了管道用于格式化和变换数据。管道是一个单向数据流处理器，它可以将输入的数据转化为显示的格式。

3.1 使用内置管道

3.1.1 `date` 管道

date 管道用于格式化日期。

<p>{{ today | date: 'short' }}</p>

3.1.2 `currency` 管道

currency 管道用于格式化数字为货币格式。

<p>{{ price | currency }}</p>

3.2 自定义管道

可以创建自定义管道以便根据需求格式化数据。以下是一个简单的管道示例：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'reverse' })
export class ReversePipe implements PipeTransform {
  transform(value: string): string {
    return value.split('').reverse().join('');
  }
}

使用自定义管道：

<p>{{ 'Hello' | reverse }}</p>

4. 视图封装和组件交互

Angular 提供了多种方式来处理组件间的数据传递和交互，常见的包括 @Input、@Output 装饰器。

4.1 `@Input` 装饰器

@Input 用于从父组件传递数据到子组件。

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `<p>{{ message }}</p>`
})
export class ChildComponent {
  @Input() message: string;
}

在父组件中使用：

<app-child [message]="parentMessage"></app-child>

4.2 `@Output` 装饰器

@Output 用于从子组件向父组件传递数据。

import { Component, EventEmitter, Output } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `<button (click)="sendMessage()">Send Message</button>`
})
export class ChildComponent {
  @Output() messageEvent = new EventEmitter<string>();

  sendMessage() {
    this.messageEvent.emit('Hello from child!');
  }
}

在父组件中使用：

<app-child (messageEvent)="receiveMessage($event)"></app-child>

5. 模板引用变量

模板引用变量允许你在模板中引用 DOM 元素或 Angular 组件。可以通过 # 来创建一个模板引用变量。

<input #myInput type="text">
<button (click)="logValue(myInput.value)">Log Input</button>

在这个例子中，#myInput 创建了一个引用变量，可以在模板中通过它访问 <input> 元素的值。

总结

Angular 2 的模板语法提供了强大的功能，包括：

数据绑定：用于绑定数据到视图，支持单向绑定和双向绑定。
指令：用于操作 DOM，分为结构型指令（如 ngIf、ngFor）和属性型指令（如 ngClass、ngStyle）。
管道：用于格式化和变换数据，支持内置管道和自定义管道。
组件交互：通过 @Input 和 @Output 装饰器实现父子组件间的通信。
模板引用变量：引用 DOM 元素或组件。

通过这些功能，Angular 使得开发者能够构建动态、响应式的 Web 应用。

Angular 2 模板语法