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 Sections

这里,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>
Show Section

这里,“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 元素。

Data Entered

总结

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

广告