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 片段。它支持与组件实例的强大交互以同步数据。它可以防止脚本注入，并通过防止模板中的副作用来提高模板输出的可预测性。