指令简介

什么是指令？

指令是用于扩展 Angular 应用中任意元素默认行为的类。我们可以将它们看作是一些功能，允许我们应用额外的逻辑，而无需将其绑定到应用中的特定位置。指令就像是高度可复用的代码，可以在需要的地方随意使用。

Angular 中有三种类型的指令：

• 组件 是用于指定 HTML 模板的指令。
• 属性指令 用于改变元素的外观或行为。例如，属性指令可以高亮显示应用文本中的特定词语。
• 结构型指令 在运行时通过添加或移除 DOM 节点来改变 DOM 布局。例如，ngIf 指令就是一种结构型指令。

我们可以将指令分为两大类：内置指令和自定义指令。

内置指令

内置指令 如其名称所示，已经内建于应用程序中。它们负责每个应用的核心功能。以下是一些内置指令的例子：

• *ngIf 指令用于条件渲染，用法如下：

  1<h1 *ngIf="active">Hello</h1>

• *ngFor 指令用于渲染多个元素，用法如下：

  1<ul>
  2  <li *ngFor="let user of users">
  3    {{ user.name }}
  4  </li>
  5</ul>

• ngModel 指令用于属性绑定，用法如下：

  1<input [(ngModel)]="user.name" />

让我们思考一下：我们使用内置指令的频率有多高？可能非常频繁！这些指令看似简单，但实际上隐藏着许多强大的功能，我们将在后续课程中深入学习。

自定义指令

自定义指令 是我们可以自行创建并根据需求进行修改的指令。如果说内置指令已经非常方便，那么这些可定制的指令则为我们提供了更多可能性！借助自定义指令，我们可以扩展基础功能以满足项目需求，或者以高度可复用的方式实现全新的想法。

在接下来的课程中，我们会详细讨论更多具体示例。但目前，先来看几个例子，帮助我们理解指令能做什么。

假设我们要创建一个指令，将内容包裹进不同的布局中，比如下面这样：

1<p withEmoji="🥳"> 这里是一段文字 </p>

效果如下：

或者，当我们发现项目中有大量重复的条件判断时，可以创建一个自定义的 ngIf 指令。

1<ul>
2  <li *ngFor="let number of [1,2,3,4,5]">
3    <p *onlyOddNumber="number">
4      {{ number }}
5    </p>
6  </li>
7</ul>

效果如下：

这些只是指令应用的几种方式，可能性几乎是无限的！

总结

指令是 Angular 框架中不可或缺的一部分，我们经常在不知不觉中使用它们！Angular 提供了多种内置指令，可以帮助我们加快开发速度。为了满足特殊需求，我们还可以创建自己的自定义指令，实现任何想要的功能。接下来我们将深入学习这些内容！现在，请记住指令的三种类型：组件、属性指令和结构型指令。