Angular 模板

2025年3月17日 | 阅读 10 分钟

在 Angular 中，模板是 HTML 的一部分。在模板中使用特殊语法可以创建许多 Angular 的功能。

应用程序中的每个 Angular 模板都是一块 HTML，将作为浏览器显示页面的一部分。Angular HTML 模板在浏览器中渲染视图或用户界面，就像常规 HTML 一样，但功能更多。

使用 Angular CLI 生成 Angular 应用程序时，app.component.html 文件是包含占位符 HTML 的默认模板。

模板语法指南向您展示如何通过协调类和模板之间的数据来控制 UX/UI。

大多数模板语法指南都有专门的工作示例应用程序，演示每个指南的单独主题。查看全面的模板语法实时代码/下载示例，以了解它们在一个应用程序中如何协同工作。

增强您的 HTML

使用模板中专门的 Angular 语法扩展应用程序的 HTML 词汇表。例如，Angular 通过内置模板函数、变量、事件监听和数据绑定等功能帮助您动态获取和设置 DOM（文档对象模型）值。

几乎所有 HTML 语法都是有效的模板语法。但是，由于 Angular 模板是整个网页的一部分，而不是整个页面，因此您无需包含诸如 <html>、<body> 或 <base> 之类的元素。您可以专注于您正在开发的页面特定部分。

Angular 不支持模板中的 <script> 元素，以消除脚本注入攻击的风险。Angular 忽略 <script> 标签并向浏览器控制台输出警告。

有关模板语法的更多信息

您可能还会对以下内容感兴趣

插值表达式 - 如何在 HTML 中使用插值和表达式。
模板语句 - 响应模板中的事件。
绑定语法 - 使用绑定协调应用程序中的值。
属性绑定 - 设置目标元素或指令 @Input() 装饰器的属性。
属性、类和样式绑定 - 设置属性、类和样式的值。
事件绑定 - 监听事件和您的 HTML。
双向绑定 - 在类和其模板之间共享数据。
内置指令 - 监听和修改 HTML 的行为和布局。
模板引用变量 - 使用特殊变量引用模板中的 DOM 元素。
输入和输出 - 父上下文和子指令或组件共享数据。
模板表达式运算符 - 了解管道运算符 |，并防止 HTML 中的 null 或 undefined 值。
SVG 中的模板 - 动态生成交互式图形。

组件控制屏幕的一小块区域，称为视图。例如，英雄之旅教程中的各个组件定义并控制以下每个场景

带有导航链接的应用程序路由。

英雄列表

您在类中定义应用程序逻辑 - 它如何支持视图。类通过属性和方法的 API 与视图交互。

例如，HeroListComponent 有一个 hero 属性，它包含一个英雄数组。当用户从该列表中选择一个英雄时，其 SelectHero() 方法会设置一个 SelectedHero 属性。组件从服务继承英雄，服务是构造函数上的 TypeScript 参数属性。服务通过依赖注入机制提供给组件。

src/app/hero-list.component.ts (class)
content_copyexport class HeroListComponent implements OnInit {
  heroes: Hero[] = [];
  selectedHero: Hero | undefined;
  constructor(private service: HeroService) { }
  ngOnInit() {
    this.heroes = this.service.getHeroes();
  }
  selectHero(hero: Hero) { this.selectedHero = hero; }
}

当用户在应用程序中移动时，Angular 会创建、更新和销毁组件。您的应用程序可以通过可选的生命周期钩子（例如 ngOnInit()）在此生命周期中的每个时刻执行操作。

组件元数据

@Component 装饰器将紧随其下的类标识为组件类，并指定其元数据。在下面的示例代码中，您可以看到 HeroListComponent 只是一个没有特殊 Angular 注记或语法的类。除非您使用 @Component 装饰器将其标记为组件，否则它不是组件。

组件的元数据告诉 Angular 在何处查找创建和渲染组件及其视图的关键构建块。具体来说，它通过内联代码或引用将模板与组件关联起来。组件及其模板共同描述了一个视图。

除了包含或指示模板外，@Component 还配置元数据，例如组件如何在 HTML 中引用以及它需要哪些服务。

src/app/hero-list.component.ts (metadata)
content_copy@Component({
  selector:    'app-hero-list',
  templateUrl: './hero-list.component.html',
  providers:  [ HeroService ]
})
export class HeroListComponent implements OnInit {
/* . . . */
}

此示例显示了一些最有用的 @Component 配置选项

Selector（选择器）：一个 CSS 选择器，它告诉 Angular 在模板 HTML 中找到相应标签时创建并插入此组件的实例。例如，如果应用程序的 HTML 包含 <app-hero-list></app-hero-list>，Angular 会在这些标签之间插入 HeroListComponent 视图的实例。

TemplateUrl：此组件 HTML 模板的模块相对地址。或者，您可以将 HTML 模板作为模板属性的值内联提供。此模板定义了组件的宿主视图。

Providers（提供者）：组件所需服务的提供者数组。该示例告诉 Angular 如何提供 HeroService 实例，该实例由组件的构造函数用于获取要显示的英雄列表。

模板和概念

您使用其关联模板定义组件的视图。模板是一种 HTML 形式，它告诉 Angular 如何渲染组件。

视图通常是分层组织的，允许您将整个 UI 部分或页面作为单个单元进行修改或显示和隐藏。与组件直接关联的模板定义了该组件的宿主视图。组件还可以定义视图层次结构，其中包含由其他组件托管的嵌入式视图。

视图层次结构可以包含来自同一 NgModule 中组件的视图，但也可以包含来自不同 NgModule 中定义的组件的视图。

模板语法

模板看起来像常规 HTML，只是它还包含 Angular 模板语法，它根据应用程序的逻辑、应用程序状态和 DOM 数据转换 HTML。您的模板可以使用数据绑定来协调应用程序和 DOM 数据，使用管道在显示数据之前对其进行转换，并使用指令来实现正在显示的应用程序逻辑。

例如，这是教程的 HeroListComponent 的模板。

src/app/hero-list.component.html

content_copy<h2>Hero List</h2>

<p><i>Select a hero from the list to see details.</i></p>
<ul>
  <li *ngFor="let hero of heroes" (click)="selectHero(hero)">
    {{hero.name}}
  </li>
</ul>
<app-hero-detail *ngIf="selectedHero" [hero]="selectedHero"></app-hero-detail>

此模板使用特定的 HTML 元素，例如 <h2> 和 <p>，并包含 Angular 模板语法元素 *ngFor、{{hero.name}}、(click)、[hero] 和 <app-hero-details>。模板语法元素告诉 Angular 如何使用程序逻辑和数据在屏幕上渲染 HTML。

*ngFor 指令告诉 Angular 遍历列表。

{{hero.name}}、(click) 和 [hero] 通过响应用户输入将程序数据绑定到 DOM 或从 DOM 绑定程序数据。请参阅下面的数据绑定部分。

示例中的 <app-hero-detail> 标签表示一个新组件 HeroDetailComponent。HeroDetailComponent（代码未显示）定义了 HeroListComponent 的 hero-detail 子视图。请注意这些自定义组件如何与原始 HTML 以相同的布局匹配。

数据绑定

如果没有框架，您将负责将数据值推送到 HTML 控件并将用户响应转换为操作和值更新。手动编写这种推拉逻辑是繁琐、容易出错且难以阅读的，正如任何经验丰富的前端 JavaScript 程序员都可以证明的那样。

Angular 支持双向数据绑定，这是一种协调模板部分与组件部分之间的机制。请参阅向模板 HTML 添加绑定标记，了解如何在 Angular 中添加两侧。

每种形式都有一个方向：从 DOM、到 DOM 或两者兼有

HeroListComponent 模板的这个示例使用了其中三种形式。

src/app/hero-list.component.html (绑定)

content_copy<li>{{hero.name}}</li>
<app-hero-detail [hero]="selectedHero"></app-hero-detail>
<li (click)="selectHero(hero)"></li>

{{hero.name}} 插值在 <li> 元素中显示组件的 hero.name 属性值。

[Hero] 属性绑定将 SelectedHero 的值从父级 HeroListComponent 传递给子级 HeroDetailComponent 的 Hero 属性。

当用户单击英雄的姓名时，(click) 事件调用绑定组件的 SelectHero 方法。

双向数据绑定（主要用于模板驱动表单）将属性绑定和事件绑定组合在一个符号中。这是一个来自 HeroDetailComponent 模板的示例，它使用带有 ngModel 指令的双向数据绑定。

src/app/hero-detail.component.html (ngModel)
content_copy<input type="text" id="hero-name" [(ngModel)]="hero.name">

在双向绑定中，数据从属性值组件流向输入框，就像属性绑定一样。用户更改也会流回组件，将属性重置为最新值，就像事件绑定一样。

Angular 在每个 JavaScript 事件周期中从应用程序组件树的根部遍历所有子组件，对所有数据绑定进行一次处理。

数据绑定在模板与其组件之间的通信中起着重要作用，对于父组件和子组件之间的通信也很重要。

管道

Angular 管道允许您在模板 HTML 中声明显示值更改。带有 @Pipe 装饰器的类定义了一个函数，该函数将输入值转换为在视图中显示的输出值。

Angular 定义了各种管道，例如日期管道和货币管道；有关完整列表，请参阅管道 API 列表。您还可以定义新管道。

要在 HTML 模板中指定值更改，请使用管道运算符 (|)。

您可以链式管道，将一个管道函数的输出发送给另一个管道函数进行转换。管道还可以接受控制其转换方式的参数。例如，您可以将所需的格式传递给数据管道。

content_copy<!-- Default format: output 'Jun 15, 2015'-->
 <p>Today is {{today | date}}</p>

<!-- fullDate format: output 'Monday, June 15, 2015'-->
<p>The date is {{today | date:'fullDate'}}</p>

 <!-- shortTime format: output '9:43 AM'-->
 <p>The time is {{today | date:'shortTime'}}</p>

指令

Angular 模板是动态的。当 Angular 渲染它们时，它会根据指令给出的指令改变 DOM。指令是带有 @Directive() 装饰器的类。

组件在技术上是一种指令。但是，组件在 Angular 应用程序中是如此专业和核心，以至于 Angular 定义了 @Component() 装饰器，它通过面向模板的功能扩展了 @Directive() 装饰器。

除了组件，还有两种其他类型的指令：结构型和属性型。Angular 定义了这两种类型的多个指令，您可以使用 @Directive() 装饰器定义自己的指令。

对于组件，指令的元数据将装饰的类与一个选择器元素关联起来，您可以使用该元素将其插入到 HTML 中。在模板中，指令通常作为元素标签中的属性出现，无论是按名称还是作为赋值的目标或绑定。

结构指令

结构指令通过在 DOM 中添加、删除和更改元素来改变布局。示例模板使用两个内置结构指令向视图的渲染方式添加应用程序逻辑。

src/app/hero-list.component.html (structural)
content_copy<li *ngFor="let hero of heroes"></li>
<app-hero-detail *ngIf="selectedHero"></app-hero-detail>

*ngFor 是一个迭代指令；它告诉 Angular 为英雄列表中的每个英雄创建一个 <li>。
*ngIf 是一个条件指令；它仅在存在选定英雄时才包含 HeroDetail 组件。

属性指令

属性指令改变现有元素的外观或行为。在模板中，它们看起来像常规 HTML 属性，因此得名。

ngModel 指令实现了双向数据绑定，它是属性指令的一个示例。NgModel 通过设置其显示值属性并响应更改事件来修改现有元素（通常是 <input>）的行为。

src/app/hero-detail.component.html (ngModel)
content_copy<input type="text" id="hero-name" [(ngModel)]="hero.name">

Angular 有更多预定义指令，它们改变布局结构（例如，ngSwitch）或修改 DOM 元素和组件的方面（例如，ngStyle 和 ngClass）。

模板语句

模板语句是您可以在 HTML 中用于响应用户事件的方法或属性。通过模板语句，您的应用程序可以通过显示动态内容或提交表单来吸引用户。

在以下示例中，模板语句出现在等号右侧的引号中，如 deleteHero() (event) = "statement"。

src/app/app.component.html
content_copy<button(click)="deleteHero()">delete hero</button>

当用户单击 deleteHero 按钮时，Angular 会调用组件类中的 deleteHero() 方法。

将模板语句与元素、组件或指令一起使用以响应事件。

语法

与模板表达式一样，模板语句使用看起来像 JavaScript 的语言。但是，模板语句的解析器与模板表达式的解析器不同。此外，模板语句解析器特别支持基本赋值 (=) 和使用分号 (;) 链式表达式。

以下 JavaScript 和模板表达式语法不被允许

New increment and decrement operators, ++ and --
operator assignment, such as += and -=
the bitwise operators, such as | and &

管道运算符

语句有一个上下文——语句所属的应用程序的特定部分。

语句只能引用语句上下文中的内容，这通常是组件实例。例如，(click)="deleteHero()" 中的 deleteHero() 是以下代码片段中组件的方法。

src/app/app.component.html

语句上下文还可以引用模板自身上下文的属性。在以下示例中，组件的事件处理方法 onSave() 将模板自身的 $event 对象作为参数。在接下来的两行中，deleteHero() 方法接受一个模板输入变量 hero，onSubmit() 接受一个模板上下文变量 #heroForm。

src/app/app.component.html

content_copy<button (click)="onSave($event)">Save</button>
<button *ngFor="let hero of heroes" (click)="deleteHero(hero)">{{hero.name}}</button>
<form #heroForm (ngSubmit)="onSubmit(heroForm)"> ... </form>

在此示例中，$event 对象是英雄和 #heroForm 的引用模板。

模板引用名称优先于组件引用名称。前面 deleteHero(hero) 中的 hero 是模板输入变量，而不是组件的 hero 属性。

语句最佳实践

简洁性

使用方法调用或基本属性赋值以使模板语句最小化。

与上下文协作

模板语句的引用可以是组件类或模板的实例。因此，模板语句不能引用全局命名空间中的任何内容，例如 window 或 document。例如，模板语句不能调用 console.log() 或 math.max()。

下一主题Angular Card

Angular 模板

增强您的 HTML

有关模板语法的更多信息

英雄列表

模板语法

数据绑定

管道

属性指令

模板语句

语法

管道运算符

语句最佳实践

简洁性

与上下文协作

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

选择题

AngularJS 教程

Angular 7 教程

Angular 其他

Angular + Spring

面试题

AngularJS 指令

Angular 模板

增强您的 HTML

有关模板语法的更多信息

英雄列表

模板语法

数据绑定

管道

属性指令

模板语句

语法

管道运算符

语句最佳实践

简洁性

与上下文协作

相关帖子

在 Visual Studio 中设置 Angular 环境

Angular vs React

Angular | forEach 循环

Angular 中的 Observables

Angular 组件

Angular 装饰器

Angular 9 特性

Angular 应用程序中的模块

Angular 18

Angular 表单验证不允许空格

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器