Angular 是一种流行的前端框架，它可以帮助开发人员构建动态 Web 应用程序。在 Angular 中，模板是一种定义组件视图的方式，它使用 HTML 和指令来描述用户界面。
本文将介绍如何在 Angular 应用程序中使用模板来渲染 HTML。我们将涉及以下主题：
- 创建一个简单的 Angular 组件
- 在模板中使用插值表达式
- 使用结构指令控制 HTML 布局
- 通过属性绑定修改 HTML 属性
- 通过事件绑定响应用户事件
1. 创建一个简单的 Angular 组件
要开始使用 Angular 模板，您需要首先创建一个 Angular 组件。组件是 Angular 应用程序的基本单元之一，它通常包含一个模板、一个类和一些元数据。以下是一个简单的组件示例：
------ - --------- - ---- ----------------
------------
--------- ------------
--------- -
------ ----- -------
---------- -- -- -------- -------
-
--
------ ----- -------------- -
----- - --------
-------- - ----------
-在上面的代码中，我们创建了一个名为 HelloComponent 的组件。它有两个属性 title 和 subtitle，分别用于在模板中显示标题和副标题。该组件的模板使用插值表达式（{{ ... }}）将这些属性绑定到 HTML 元素上。
2. 在模板中使用插值表达式
插值表达式是 Angular 模板中最简单、最常用的一种数据绑定方式。它通过将 JavaScript 表达式包含在双花括号中来将组件属性绑定到 HTML 元素上。例如，在前面的示例中，我们使用以下代码将 title 和 subtitle 绑定到 <h1> 和 <p> 元素上：
------ ----- ------- ---------- -- -- -------- -------
当组件被加载时，Angular 将计算这些表达式并将结果插入到相应的元素中。例如，如果 title 的值为 "Hello"，subtitle 的值为 "Angular"，则上述模板将渲染为以下 HTML 代码：
-------------- ---------- -- ------------
3. 使用结构指令控制 HTML 布局
除了插值表达式外，Angular 还提供了另一种强大的模板功能：结构指令。结构指令可以让您根据组件数据动态修改 HTML 布局，从而实现更复杂的用户界面。
其中一种常见的结构指令是 *ngIf，它可以根据条件添加或删除一个元素。例如，以下代码显示了一个包含两个按钮的组件。当 displayButton1 为 true 时，显示第一个按钮；当 displayButton2 为 true 时，显示第二个按钮：
----- ------- ----------------------------- ---------- ------- ----------------------------- ---------- ------
另一种常见的结构指令是 *ngFor，它可以根据数组内元素的数量重复一个元素。例如，以下代码显示了一个列表，其中每个元素都是一个字符串，存储在名为 items 的组件属性中：
---- --- ----------- ---- -- --------- ---- ------- -----
在这个例子中，我们使用 *ngFor 指令将 ul 元素的每个 li 子元素绑定到 items 数组中
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/25273