在 Angular 开发中，模板语法是连接组件逻辑与视图的核心桥梁，而插值表达式{{}}和属性绑定[]是最基础也最常用的两种语法。很多初学者容易混淆二者的使用场景，甚至误用导致功能异常。本文将从核心概念、使用场景、区别与联系三个维度，彻底讲透这两种语法的正确用法。
一、插值表达式 {{}}：极简的文本渲染
1. 核心定义
插值表达式（Interpolation）是 Angular 模板中最直观的语法，通过{{ 表达式 }}的形式，将组件类中的数据、简单表达式结果渲染到视图的文本节点中。本质上，Angular 会将插值表达式编译为属性绑定（[textContent]），是属性绑定的 “语法糖”。
2. 基础用法
（1）渲染组件属性
组件类中定义的属性，可直接通过插值表达式展示在视图中：
// app.component.ts import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html' }) export class AppComponent { username = 'Angular开发者'; age = 3; // Angular版本隐喻 }<!-- app.component.html --> <h1>欢迎 {{ username }}！</h1> <p>Angular框架已陪伴我们 {{ age }} 个大版本迭代</p>渲染结果：
欢迎 Angular开发者！ Angular框架已陪伴我们 3 个大版本迭代（2）支持简单表达式
插值表达式内可写简单的 JavaScript 表达式（注意：仅支持单一表达式，不支持语句）：
<!-- 算术运算 --> <p>10 + 20 = {{ 10 + 20 }}</p> <!-- 三元表达式 --> <p>当前环境：{{ isProduction ? '生产环境' : '开发环境' }}</p> <!-- 属性拼接 --> <p>完整标题：{{ 'Angular-' + version }}</p> <!-- 方法调用（返回值） --> <p>格式化时间：{{ getFormatTime() }}</p>⚠️ 注意：禁止在插值表达式中写复杂逻辑（如 if 语句、循环），复杂逻辑应封装在组件类的方法 / 属性中。
3. 适用场景
- 渲染文本内容（如标签内的文字、注释外的文本）；
- 简单的表达式计算结果展示；
- 快速绑定组件基础属性到视图文本节点。
4. 常见误区
❌ 错误：用插值表达式绑定 HTML 属性（如src、href、disabled）
<!-- 错误示例：插值表达式绑定img的src属性 --> <img src="{{ imageUrl }}" /> <!-- 虽能渲染，但存在XSS风险，且语义不清晰 -->二、属性绑定 []：精准的属性 / 数据绑定
1. 核心定义
属性绑定（Property Binding）通过[属性名]="表达式"的形式，将组件数据绑定到 DOM 元素、组件或指令的属性（Property）上。与 HTML 特性（Attribute）不同，DOM 属性是元素在 JavaScript 中的对象属性（如input.value、img.src），属性绑定是 Angular 中最基础的 “单向绑定”（组件→视图）。
2. 基础用法
（1）绑定 DOM 元素属性
// app.component.ts export class AppComponent { imageUrl = 'https://angular.io/assets/images/logos/angular/angular.svg'; inputValue = '默认输入值'; isDisabled = true; }<!-- 绑定img的src属性 --> <img [src]="imageUrl" alt="Angular Logo" /> <!-- 绑定input的value属性 --> <input type="text" [value]="inputValue" /> <!-- 绑定button的disabled属性（布尔值） --> <button [disabled]="isDisabled">点击</button>（2）绑定组件 / 指令属性
如果自定义了子组件，可通过属性绑定传递数据：
// child.component.ts import { Component, Input } from '@angular/core'; @Component({ selector: 'app-child', template: '<p>父组件传递的值：{{ childData }}</p>' }) export class ChildComponent { @Input() childData: string; // 接收父组件传递的属性 }<!-- 父组件模板：绑定子组件的childData属性 --> <app-child [childData]="parentMessage"></app-child>（3）绑定样式 / 类（特殊的属性绑定）
<!-- 绑定class属性 --> <div [class.active]="isActive">激活状态</div> <!-- 绑定style属性 --> <div [style.color]="textColor">自定义文字颜色</div>3. 适用场景
- 绑定 DOM 元素的非文本属性（如
src、href、disabled、value）； - 向子组件传递数据（配合
@Input()）； - 绑定指令属性、样式 / 类属性；
- 处理布尔类型属性（如
disabled、checked）。
4. 常见误区
❌ 错误：混淆 HTML 特性（Attribute）与 DOM 属性（Property）
<!-- 错误：想绑定HTML的aria-label特性，却用了属性绑定 --> <div [aria-label]="labelText">内容</div> <!-- 正确：特性绑定用attr.前缀 --> <div [attr.aria-label]="labelText">内容</div>❌ 错误：属性绑定中加花括号
<!-- 错误：重复绑定 --> <img [src]="{{ imageUrl }}" /> <!-- 正确：属性绑定直接写表达式 --> <img [src]="imageUrl" />三、插值表达式 vs 属性绑定：核心区别与统一
1. 核心区别
| 维度 | 插值表达式{{}} | 属性绑定[] |
|---|---|---|
| 绑定目标 | 文本节点（textContent） | DOM 属性 / 组件 / 指令属性 |
| 语法形式 | {{ 表达式 }} | [属性名]="表达式" |
| 适用场景 | 文本渲染 | 非文本属性、布尔属性、组件传值 |
| 布尔值处理 | 不适用（会转为字符串 "true"/"false"） | 原生支持布尔值（如 disabled=true 则禁用） |
2. 底层统一
Angular 在编译阶段，会将插值表达式转换为[textContent]属性绑定：
<!-- 手写代码 --> <p>{{ username }}</p> <!-- 编译后等价于 --> <p [textContent]="username"></p>因此，所有插值表达式能实现的功能，属性绑定都能实现；但属性绑定的能力远大于插值表达式。
3. 最佳实践
- 渲染纯文本：优先用插值表达式（更简洁）；
- 绑定属性 / 组件传值 / 布尔属性：必须用属性绑定；
- 避免混合使用（如
[src]="{{}}"）； - 复杂逻辑封装到组件类，模板中只保留简单表达式。
四、总结
插值表达式{{}}是属性绑定的 “语法糖”，专为文本渲染设计，简洁直观；属性绑定[]是 Angular 模板绑定的核心，覆盖了从 DOM 属性到组件通信的全场景。掌握二者的关键是：文本用插值，属性用绑定。
在实际开发中，只要记住 “绑定文本用{{}}，绑定属性用[]”，就能避开 90% 的模板语法错误。同时，理解 DOM 属性与 HTML 特性的区别，能让你在处理特殊属性（如 ARIA、自定义特性）时更得心应手。
Angular 模板语法的设计遵循 “简洁且精准” 的原则，掌握基础的插值与属性绑定，是后续学习双向绑定、事件绑定、管道等高级特性的基石。
