Angular中的模板是什么？

封面图 • 2026-05-29 • Angular

在 **Angular** 中，**模板（Template）** 是用于定义组件视图的 HTML 模块。它是 Angular 应用中用户界面（UI）的核心部分，用来描述页面的结构和内容。

---

### 一、什么是 Angular 模板？

Angular 模板本质上是一个 HTML 文件，但包含了一些特殊的语法和指令，用于：

- 动态绑定数据（如 `{{ }}`）
- 控制 DOM 的显示与隐藏（如 `*ngIf`）
- 循环渲染元素（如 `*ngFor`）
- 绑定事件（如 `(click)`）
- 使用自定义指令或管道（Pipe）

---

### 二、模板的组成部分

一个典型的 Angular 模板可能包含以下内容：

```html

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

<p *ngIf="showMessage">{{ message }}</p>

<button (click)="onClick()">点击我</button>
```

#### 说明：

- `{{ title }}`：数据绑定，显示组件中的 `title` 属性。
- `*ngIf="showMessage"`：条件渲染，当 `showMessage` 为 `true` 时显示 `<p>` 标签。
- `*ngFor="let item of items"`：循环渲染列表。
- `(click)="onClick()"`：绑定点击事件，调用组件中的 `onClick()` 方法。

---

### 三、模板与组件的关系

每个 Angular 组件都有一个对应的模板文件（通常是 `.html` 文件），通过 `@Component` 装饰器指定：

```ts
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  title = '我的 Angular 应用';
  showMessage = true;
  message = 'Hello, Angular!';
  items = ['苹果', '香蕉', '橙子'];
  onClick() {
    console.log('按钮被点击了！');
  }
}
```

---

### 四、模板的其他特性

1. **内联模板（Inline Template）**：
   可以直接在组件装饰器中写模板内容：

```ts
   @Component({
     selector: 'app-root',
     template: '<h1>内联模板</h1>'
   })
   ```

2. **模板引用变量（Template Reference Variables）**：
   通过 `#varName` 获取 DOM 元素或组件实例：

```html
   <input #myInput type="text">
   <button (click)="logValue(myInput.value)">输出值</button>
   ```

3. **双向绑定（Two-way Binding）**：
   使用 `[(ngModel)]` 实现数据和视图的同步：

```html
   <input [(ngModel)]="username">
   ```

4. **使用管道（Pipe）**：
   对数据进行格式化处理，例如日期、货币等：

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

---

### 五、总结

| 内容         | 说明 |
|--------------|------|
| **模板（Template）** | Angular 中用于定义 UI 的 HTML 文件 |
| **作用** | 显示数据、控制视图逻辑、绑定事件、动态渲染 |
| **与组件关系** | 每个组件都有一个模板文件（或内联） |
| **常见语法** | `{{ }}`、`*ngIf`、`*ngFor`、`(event)`、`[(ngModel)]` |

---

如果你是刚开始学习 Angular，建议从模板的基本语法开始，逐步掌握数据绑定、指令、表单等高级功能。需要的话我可以提供示例项目或代码片段帮助你理解。