在Angular中，什么是字符串插值？

封面图 • 2025-09-24 • Angular

在 Angular 中，**字符串插值（String Interpolation）** 是一种用于将组件中的数据动态地显示在模板（HTML）中的方法。它使用 **双花括号 `{{ }}`** 语法来绑定数据。

---

### ✅ 基本语法：

```html
<p>{{ expression }}</p>
```

其中 `expression` 可以是变量、表达式或方法调用。

---

### 📌 示例

假设你有一个 Angular 组件如下：

```typescript
// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <h1>{{ title }}</h1>
    <p>年龄：{{ age }}</p>
    <p>总和：{{ 2 + 2 }}</p>
    <p>方法返回值：{{ getGreeting() }}</p>
  `
})
export class AppComponent {
  title = '我的 Angular 应用';
  age = 25;

getGreeting() {
    return '你好，Angular！';
  }
}
```

在浏览器中会显示：

```
我的 Angular 应用
年龄：25
总和：4
方法返回值：你好，Angular！
```

---

### 🔍 说明

- `{{ title }}`：将组件的 `title` 属性值插入到 HTML 中。
- `{{ 2 + 2 }}`：可以写简单的表达式。
- `{{ getGreeting() }}`：可以调用组件的方法并显示其返回值。

---

### ⚠️ 注意事项

- 字符串插值只适用于 **文本内容**，不能用于属性绑定（如 `src`, `class`, `style` 等），除非使用 Angular 的属性绑定语法 `[attr]`。
- 插值不会执行 HTML 解析，因此如果要渲染 HTML 内容，需要使用 `innerHTML` 或 `DomSanitizer`（注意安全风险）。

---

### 🧩 小结

| 特性 | 描述 |
|------|------|
| 语法 | `{{ }}` |
| 用途 | 显示组件中的数据（字符串、数字、表达式、方法返回值） |
| 不支持 | 直接绑定 HTML 属性（如 `src`, `class`） |

如果你有更具体的场景或问题，欢迎继续提问！