指令是Angular中最重要的概念之一，在本节中，我们将看到什么是指令和它的类型以及如何创建我们自己的指令。
Angular中的指令是什么意思？
指令是为模板中的元素添加新行为或修改现有行为的类。
基本上指令是用来操作DOM的，例如从DOM中添加/删除元素或改变DOM元素的外观。
指令的类型
- 组件指令
- 结构指令
- 属性指令
组件指令
组件是Angular中的特殊指令。它们是带有模板的指令
这可能会让你有点困惑，但如果你看到指令的定义，它说指令是用来操作DOM的，所以现在如果你认为组件在做什么，它实际上是在DOM中显示一些东西，因此我们可以说组件也是一个带模板的指令（模板或templateUrls）。
结构性指令
结构指令是用来通过添加和删除DOM元素来改变DOM布局的。它基本上改变了
DOME
的结构
，结构指令的例子有ngIf*, ngFor* , ngSwitch
。
*ngIf - 从DOM中添加或删除元素。
*ngFor - 在每次迭代时渲染元素的列表。
所有的结构性指令前面都有一个星号（*）符号。
属性指令
属性指令用于改变一个元素的外观或行为。
属性指令的例子有ngStyle*, ngClass* , ngModel
ngStyle - 用于应用改变外观的样式。
ngClass - 用于应用改变外观的CSS类。
创建我们自己的Attribute指令
按照下面的步骤创建我们自己的Attribute指令，当我们将鼠标悬停在文本上时，它将改变文本的颜色。
创建一个自定义指令就像创建一个Angular组件一样。为了创建一个自定义指令，我们必须用@Directive装饰器代替@Component装饰器。
- 创建一个类，并在其中添加@Directive装饰器，然后传递具有选择器属性（指令名称）的对象。
- 为了创建一个属性指令，我们需要访问应用该指令的HTML元素，为此我们将在类中使用构造函数注入ElementRefdependency。
- 现在我们必须监听元素上的悬停事件，为此我们可以使用HostListener
*HostListener监听主机元素上的DOM事件。它还提供了一个处理方法，以便在事件发生时运行。
这里的宿主元素是我们应用指令的元素。
* - 在处理方法中，访问元素引用并改变文本的颜色。
向指令传递输入
在上面的例子中，我们把颜色值硬编码为红色，但也有一种方法可以把颜色名称作为指令的输入来传递
方法1:
在指令类中添加与指令名称相同的@输入()(@Input() highlight;)，然后像这样传递数值
Highlight指令
。**方法2:
**在指令类中添加一个@ Input()的变量名称（@Input() colorName;），然后像这样传递数值
高亮指令
。创建我们自己的结构指令
按照下面的步骤创建我们自己的结构指令，根据提供的值添加或删除内容（类似于**ngIf*）。
-
创建一个类，并向其添加@Directive装饰器，然后传递具有选择器属性（指令名称）的对象。
-
在结构化指令的情况下，我们需要两样东西
--ViewContainerRef
-
**TemplateRefViewContainerRef--**它 ，持有对承载组件（或指令）的主元素的引用。
**TemplateRef -**它 ，持有ng-template所定义的模板的引用。
在我们指令类的构造函数中注入这两个依赖项 -
创建一个@ Input()，其变量名称与指令的名称相似
，它告诉我们是否要添加或删除内容
。 -
现在我们必须在值为真时显示内容，在值为假时删除，为此创建一个ngOnChanges()生命周期钩子方法
-
在ngOnChanges中，检查该值
，如果是真的--将模板Ref添加到容器Ref中
，如果是假的--清除容器Ref中的所有内容。
ngOnChanges() {
if (this.toggle) {
this.viewRef.createEmbeddedView(this.tempRef);
} else {
this.viewRef.clear();
}
}
在我们的组件模板中这样使用该指令
<div *toggle="true">
这就是angular中指令的全部内容，我只解释了非常基本的内容，你可以通过阅读官方文档来深入了解。
干杯，学习愉快!
构建可组合的Web应用
不要建立网络单体。使用 比特来创建和组成解耦的软件组件--在你喜欢的框架中，如React或Node。构建可扩展和模块化的应用程序，拥有强大和愉快的开发体验。
把你的团队带到 比特云来托管并共同协作开发组件，并作为一个团队加快、扩大和规范开发。尝试用设计系统 或微前端的可组合前端，或探索用服务器端组件的可组合后端。
了解更多
什么是Angular中的指令？原文发表于Bits and Pieceson Medium，在这里人们通过强调和回应这个故事继续对话。
