在 Angular 中，指令是一个非常重要的概念。指令可以让我们扩展 HTML 标签，为 HTML 标签添加行为和样式。本文将详细介绍 Angular 中的指令，包括指令的类型、指令的生命周期、指令的使用方法以及如何编写自定义指令。
指令的类型
在 Angular 中，指令分为三种类型：组件指令、结构型指令和属性型指令。
组件指令
组件指令是 Angular 中最常用的指令类型，它可以创建一个带有模板、样式和行为的组件。组件指令通常会在应用中被多次使用，它们可以接收输入数据并输出数据，还可以通过依赖注入来访问服务和组件。
组件指令的定义方式如下：
-- -------------------- ---- -------
------------
--------- -------------------
------------ --------------------------------
---------- --------------------------------
--
------ ----- -------------------- ---------- ------ -
-------- ---------- -------
--------- ---------- - --- -----------------------
------------- - -
----------- ---- -
-
---------- ---- -
-------------------------------
-
-结构型指令
结构型指令是一种特殊的指令，它可以改变 HTML 的结构。常见的结构型指令有 ngIf、ngFor 和 ngSwitch。结构型指令通常会用在模板中，用于根据不同的条件来显示或隐藏 HTML 元素。
结构型指令的定义方式如下：
<div *ngIf="show">Hello, Angular!</div>
<ul>
<li *ngFor="let item of items">{{item}}</li>
</ul>属性型指令
属性型指令是一种可以修改 HTML 属性的指令，常见的属性型指令有 ngClass、ngStyle 等。属性型指令通常会用在 HTML 元素上，用于修改元素的属性。
属性型指令的定义方式如下：
<div [ngClass]="{'active': isActive, 'disabled': isDisabled}">Hello, Angular!</div>指令的生命周期
在 Angular 中，每个指令都有自己的生命周期。指令的生命周期可以分为四个阶段：创建阶段、更新阶段、检测阶段和销毁阶段。
创建阶段
在创建阶段，Angular 会创建指令的实例，并调用指令的构造函数。在这个阶段中，指令的属性还没有被赋值。
更新阶段
在更新阶段，Angular 会通过调用 ngOnChanges() 方法来更新指令的属性。在这个阶段中，指令的属性已经被赋值，但是视图还没有被更新。
检测阶段
在检测阶段，Angular 会通过调用 ngDoCheck() 方法来检测指令的变化。在这个阶段中，Angular 会比较指令的属性和之前的值，如果不相同则会更新视图。
销毁阶段
在销毁阶段，Angular 会通过调用 ngOnDestroy() 方法来销毁指令的实例。在这个阶段中，指令已经不再使用，可以释放资源。
指令的使用方法
在 Angular 中，我们可以通过在 HTML 标签上添加指令来使用它。指令通常会带有一些参数，用于控制指令的行为。
内置指令
Angular 中内置了很多指令，这些指令可以直接在模板中使用。常见的内置指令有 *ngIf、*ngFor、*ngSwitch、[ngClass]、[ngStyle] 等。
<div *ngIf="show">Hello, Angular!</div>
<ul>
<li *ngFor="let item of items">{{item}}</li>
</ul>
<div [ngClass]="{'active': isActive, 'disabled': isDisabled}">Hello, Angular!</div>自定义指令
除了内置指令之外，我们还可以编写自己的指令。自定义指令可以用于扩展 HTML 标签的行为和样式。
@Directive({
selector: '[appHighlight]'
})
export class HighlightDirective {
constructor(private el: ElementRef) {
this.el.nativeElement.style.backgroundColor = 'yellow';
}
}<div appHighlight>Hello, Angular!</div>
总结
指令是 Angular 中非常重要的概念，它可以让我们扩展 HTML 标签，为 HTML 标签添加行为和样式。本文介绍了指令的类型、生命周期、使用方法以及如何编写自定义指令。希望对大家学习 Angular 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65d083f0add4f0e0ff97b5c6