
- Angular 教程
- Angular - 首页
- Angular - 概述
- Angular - 特性
- Angular - 优点与缺点
- Angular 基础
- Angular - 环境设置
- Angular - 第一个应用
- Angular - MVC 架构
- Angular 组件
- Angular - 组件
- Angular - 组件生命周期
- Angular - 视图封装
- Angular - 组件交互
- Angular - 组件样式
- Angular - 嵌套组件
- Angular - 内容投影
- Angular - 动态组件
- Angular - 元素
- Angular 模板
- Angular - 模板
- Angular - 文本插值
- Angular - 模板语句
- Angular - 模板中的变量
- Angular - SVG 作为模板
- Angular 绑定
- Angular - 绑定及其类型
- Angular - 数据绑定
- Angular - 事件绑定
- Angular - 属性绑定
- Angular - 属性绑定
- Angular - 类和样式绑定
- Angular 指令
- Angular - 指令
- Angular - 内置指令
- Angular 管道
- Angular - 管道
- Angular - 使用管道转换数据
- Angular 依赖注入
- Angular - 依赖注入
- Angular HTTP 客户端编程
- Angular - 服务
- Angular - HTTP 客户端
- Angular - 请求
- Angular - 响应
- Angular - 获取
- Angular - PUT
- Angular - DELETE
- Angular - JSON-P
- Angular - 使用 HTTP 进行 CRUD 操作
- Angular 路由
- Angular - 路由
- Angular - 导航
- Angular - Angular Material
- Angular 动画
- Angular - 动画
- Angular 表单
- Angular - 表单
- Angular - 表单验证
- Angular Service Workers 和 PWA
- Angular - Service Workers 和 PWA
- Angular 测试
- Angular - 测试概述
- Angular NgModule
- Angular - 模块介绍
- Angular 高级
- Angular - 身份验证和授权
- Angular - 国际化
- Angular - 可访问性
- Angular - Web Workers
- Angular - 服务器端渲染
- Angular - Ivy 编译器
- Angular - 使用 Bazel 构建
- Angular - 向后兼容性
- Angular - 响应式编程
- Angular - 在指令和组件之间共享数据
- Angular 工具
- Angular - CLI
- Angular 其他
- Angular - 第三方控件
- Angular - 配置
- Angular - 显示数据
- Angular - 装饰器和元数据
- Angular - 基本示例
- Angular - 错误处理
- Angular - 测试和构建项目
- Angular - 生命周期钩子
- Angular - 用户输入
- Angular - 新功能?
- Angular 有用资源
- Angular - 快速指南
- Angular - 有用资源
- Angular - 讨论
Angular - 模板
Angular 模板用于生成组件的视图/用户界面,以便在浏览器中呈现。
在本章中,让我们一起了解 Angular 模板的概述,然后在后面的章节中更详细地学习模板的每个主题。
Angular 视图
Angular 提供了一套丰富的功能来创建应用程序的用户界面。Angular 应用程序的用户界面的一部分称为 Angular 视图。Angular 视图基本上是在 Angular 应用程序执行期间中间存储在内存中的 HTML/DOM 结构块。Angular 视图呈现到 Angular 应用程序的最终 HTML 标记中。
Angular 应用程序中的每个组件都将有一个与其关联的视图。与组件关联的视图称为组件视图。组件视图是在应用程序执行过程中根据与组件关联的 Angular 模板创建的。因此,Angular 应用程序中的每个组件都将有一个与其关联的模板。模板和组件实例之间存在动态交互。模板从组件接收数据,并将数据发送到组件。
Angular 模板
Angular 模板基本上是 HTML 语言的扩展。它支持所有 HTML 元素,除了以下元素。
- HTML
- body
- base
- script
由于 Angular 模板的目的是仅生成 HTML 片段,而不是完整的 HTML 文档,因此它不支持 HTML 元素(HTML、body 和 base),这些元素仅用于创建 HTML 文档。出于防止在最终的 Angular 应用程序中注入脚本的目的,script 标签被有意地不支持。
Angular 模板的特性
除了 HTML 之外,Angular 模板还支持其他功能来创建动态内容并提供与组件的丰富交互。
- Angular 组件
- 文本插值
- 通过 Angular 管道进行文本转换
- 语句
- 绑定
- Angular 指令
- 模板变量
Angular 组件
Angular 模板支持包含应用程序中可用的其他组件。在模板中使用组件可以实现组件的嵌套以及组件之间的丰富交互。让我们考虑两个组件,home 和 login 组件。然后,home 组件的模板可以包含 login 组件,如下所示:
<div id="container"> <login></login> </div>
文本插值
文本插值是在模板中使用模板表达式来使用组件的数据。假设一个组件有一个名为 name 的属性。
export class HomeComponent { name: string = 'John' }
然后,name 可以在其模板中使用,如下所示:
Hello {{ name }}
请注意,双花括号用于指定模板表达式。
通过管道进行文本转换
可以使用管道符号 (|) 在模板中进行文本转换。Angular 模板提供了一个名为 Angular 管道的独特功能,它基本上是一个 JavaScript 函数,它接受输入以及通过参数进行的修饰符,并将输入数据的格式从一种转换为另一种,并将其呈现。Angular 拥有许多用于日期、货币等的内置管道,并且还提供了创建新的自定义管道的选项。
让我们考虑一个简单的组件 CurrentTimeComponent 来显示当前时间和日期。
export class CurrentTimeComponent { currentDate : date = new Date() } <div> The current date and time is {{ currentDate | date:'short' }} </div>
这里,date 是管道函数 (datePipe),short 是它的参数。这将以简单的格式显示带有时间的当前日期,如下所示
<div _ngcontent-ng-c323970836=""> The current date and time is 7/29/23, 3:35 PM </div>
模板语句
模板语句用于通过 HTML 文档中的事件与用户交互。模板语句类似于 JavaScript 表达式,但有一些例外和一些添加。
让我们考虑一个通过用户操作显示/隐藏部分的简单场景。该组件将有一个隐藏方法 hide() 和另一个显示方法 show() 来显示该部分。该组件的模板将有两个按钮来触发 show 和 hide 操作。按钮的 click 事件将通过模板语句设置为 show/hide 方法。
export class MySectionComponent { hideStatus: boolean = false; show() { this.hideStatus = false; } hide() { this.hideStatus = true; } }
这里,hideStatus 是组件的一个布尔属性,用于在 section 元素中设置/删除 CSS 类 hide。show() 和 hide() 是两个方法,用于执行在 section 元素中设置/删除 css 类的操作。
.hide { display: none; } <div [class.hide]="hideStatus"> <p>Hi, I am simple section created for the testing purpose<p> </div> <button (click)="hide()">Hide the section</button> <button (click)="show()">Show the section</button>

这里,hide() 和 show() 是模板语句,用于为按钮的 click 事件设置操作。[class.hide]="hideStatus" 是 Angular 模板中提供的类绑定概念,我们将在后面的章节中学习。
绑定
绑定是连接模板中的目标和基于组件模型的表达式或语句的过程,该组件模型属于模板所属的组件。文本插值是最简单的绑定形式,Angular 提供了许多类型的绑定。它们如下:
文本插值:文本插值是将组件实例的模型连接到组件模板的文本部分的过程
属性绑定:属性绑定是将组件实例的模型连接到组件模板中(目标)HTML 元素的属性的过程
类和样式绑定:类和样式绑定是将组件实例的模型连接到组件模板中(目标)HTML 元素的 class 和 style 属性的过程
属性绑定:属性绑定是将组件实例的模型连接到组件模板中(目标)HTML 元素/其他组件的属性的过程。Angular 将 HTML 元素的属性公开为属性,并将属性名称转换为驼峰命名法。这将有助于通过属性绑定连接 HTML 元素的所有属性。
事件绑定:事件绑定是将组件实例方法的模型连接到(目标)HTML 元素/(另一个)组件的事件的过程。
双向数据绑定:双向数据绑定是属性和事件绑定的组合,用于同步父组件和子组件之间的数据。
指令
Angular 提供了一个出色的功能,即指令,以通用方式为任何现有的 HTML 元素或组件添加其他行为。除了创建新的指令之外,Angular 还提供了一组默认的指令,以向 HTML 元素和组件提供其他功能,例如条件 (ngIf) 和循环 (ngFor)(在 Angular 模板中不可用)。我们将在后面的章节中学习内置指令的完整集合。
使用 ngIf 指令显示或隐藏目标元素的一个简单示例如下:
import { Component } from '@angular/core'; @Component({ selector: 'app-my-section', templateUrl: './my-section.component.html', styleUrls: ['./my-section.component.css'] }) export class MySectionComponent { showSection: boolean = true; }
这里,showSection 是组件中具有真值变量。
<div *ngIf="showSection"> I will be shown based on the `showSection` property in the component's instance. </div>

这里,“showSection”是 ngIf 使用的条件(模板表达式),用于决定 div 元素的呈现。如果条件成功,则它将呈现 div 元素,否则跳过元素的呈现。
如果 showSection 值更改为 false,则不会显示该部分。
模板变量
模板变量基本上用于引用模板中的以下任何一项。
- HTML 元素
- 指令
- 组件
- 模板内的模板 (ng-template)
- Web 组件
让我们为 input 元素和 span 元素创建一个引用,并将输入元素中输入的值显示到 span 元素中。
<input #source /> <span #target></span> <div style="padding-top: 5px;"> <button (click)="target.innerText = source.value;">Show</button> </div>
这里,
source 是引用 input 元素的模板变量
target 是引用目标 span 元素的模板变量。
当用户单击按钮时,click 事件将触发并运行事件内指定的语句,并将用户输入的数据设置为 span 元素。

总结
Angular 中的模板提供了许多选项来非常有效地生成 UI 片段。它支持与组件实例的强大交互以同步数据。它可以防止脚本注入,并通过防止模板中的副作用来提高模板输出的可预测性。