以下是一些关于Angular文本插值的基本用法：
1. 插入变量： 使用插值表达式可以插入组件类中的变量值。
// 组件类
export class AppComponent {
title = 'Angular App';
}
<!-- 模板 -->
<h1>{{ title }}</h1>
2. 执行表达式： 插值表达式中可以包含任意有效的 JavaScript 表达式。
// 组件类
export class AppComponent {
count = 5;
}
<!-- 模板 -->
<p>{{ count * 2 }}</p>
3. 连接文本： 插值表达式可以连接文本和变量。
// 组件类
export class AppComponent {
name = 'John';
}
<!-- 模板 -->
<p>Hello, {{ name }}!</p>
4. 空值处理： 当绑定的变量为 null 或 undefined 时，Angular 会显示空字符串而不是抛出错误。
// 组件类
export class AppComponent {
message: string = null;
}
<!-- 模板 -->
<p>{{ message }}</p>
5. 安全性： Angular 默认会对插值表达式中的内容进行安全性检查，以防止跨站点脚本攻击（XSS）。它会对潜在的危险字符进行转义。
// 组件类
export class AppComponent {
userInput = '<script>alert("Dangerous!")</script>';
}
<!-- 模板 -->
<p>{{ userInput }}</p>
输出的HTML将是安全的，<script> 标签会被转义。
文本插值是一种在Angular模板中将动态数据显示给用户的简单而有效的方法。在实际应用中，它常常与其他Angular特性（如属性绑定、事件绑定、结构指令等）结合使用，以构建交互式和动态的用户界面。
转载请注明出处：http://www.zyzy.cn/article/detail/4920/Angular