在 Angular 中，指令（Directive）是一种能够扩展 HTML 元素或者属性的方式，可以让开发者在需要的时候添加新的行为或者样式，以及对元素进行数据绑定。除了 Angular 自带的指令外，我们还可以自定义指令以满足不同的需求，本文将会详细介绍如何自定义指令，并给出相应的实例代码。
自定义指令的基本概念
在开始编写自定义指令之前，我们需要了解指令的基本概念。在 Angular 中指令可以分成三种类型：组件（Component）、结构性指令和属性型指令。其中，组件作为 Angular 中的另一个核心概念，在后面会详细介绍，这里主要介绍结构性指令和属性型指令。
结构性指令
结构性指令是 Angular 中最常用的指令之一，它可以改变 HTML 的布局和结构。Angular 自带的 *ngIf 和 *ngFor 就是两个典型的结构性指令。在自定义指令时，我们可以通过指定 selector 为属性指令的方式来定义结构性指令，例如：
@Directive({
selector: '[myDirective]'
})
export class MyDirective {
constructor(private el: ElementRef) {}
}属性型指令
属性型指令通常用来修改元素的样式和行为，可以为某个 HTML 元素添加自定义的属性。Angular 自带的 [ngStyle] 和 [ngClass] 就是两个典型的属性型指令。在自定义指令时，我们可以通过指定 selector 为属性指令的方式来定义属性型指令，例如：
@Directive({
selector: '[myDirective]'
})
export class MyDirective {
constructor(private el: ElementRef, private renderer: Renderer2) {}
}其中，el 表示当前元素的 ElementRef 对象，renderer 则可以用来直接操作 Dom 元素。
自定义结构性指令
在这个例子中，我们将会创建一个名为 myIfElse 的结构性指令，该指令可以实现类似于 *ngIf-else 的功能。
首先，在 app.module.ts 中导入并注册自定义指令：
-- -------------------- ---- -------
------ - ----------------- - ---- -------------------------
-----------
------------- -
-------------
-----------------
--
-------- -
--------------
-----------
--
---------- ---
---------- --------------
--
------ ----- --------- - -接着，我们在 my-if-else.directive.ts 文件中编写自定义指令：
-- -------------------- ---- -------
------ - ---------- ------ ------------ ---------------- - ---- ----------------
------------
--------- -------------
--
------ ----- ----------------- -
------- ------- - ------
------------
------- ------------ -----------------
------- -------------- ----------------
- --
-------- --- ------------------- -------- -
-- ---------- -- -------------- -
--------------------------------------------------------
------------ - -----
- ---- -- ----------- -- ------------- -
---------------------------
------------ - ------
-
-
-在该指令中，我们通过 @Input 装饰器定义了 myIfElse 输入属性，该属性会被传入到 setter 方法中，并根据条件生成或者销毁模板，从而实现了类似于 *ngIf-else 的功能。
最后，在 app.component.html 文件中使用自定义指令：
<div *myIfElse="true"> Visible </div> <div *myIfElse="false"> Hidden </div>
自定义属性型指令
在这个例子中，我们将会创建一个名为 myHighlight 的属性型指令，该指令可以为元素添加一个指定的颜色高亮。
首先，在 app.module.ts 中导入并注册自定义指令：
-- -------------------- ---- -------
------ - -------------------- - ---- ---------------------------
-----------
------------- -
-------------
--------------------
--
-------- -
--------------
-----------
--
---------- ---
---------- --------------
--
------ ----- --------- - -接着，我们在 my-highlight.directive.ts 文件中编写自定义指令：
-- -------------------- ---- -------
------ - ---------- ----------- ------------- ------ --------- - ---- ----------------
------------
--------- ---------------
--
------ ----- -------------------- -
------------------- --- ----------- ------- --------- ---------- --
--------------------- --------------- -------
--------------------------- -------------- -
---------------------------------- -- ----------
-
--------------------------- -------------- -
---------------------
-
------- ---------------- ------ - ----- -
--------------------------------------------- ------------------ -------
-
-在该指令中，我们首先通过 @Input 装饰器定义了 myHighlight 输入属性，之后又使用 @HostListener 装饰器为元素添加了鼠标进入和离开的监听事件，当监听到鼠标进入事件时，调用 highlight 方法来添加高亮样式。
最后，在 app.component.html 文件中使用自定义指令：
<div myHighlight="'green'">Highlight me!</div> <div myHighlight>Default highlight</div>
带参数的用法可以传递一个字符串表示高亮的颜色，这里是 'green'，不带参数的用法表示使用默认值 'yellow'。
总结
本文介绍了如何在 Angular 中自定义指令，以及如何使用自定义指令实现结构性和属性型指令，给出了相应的示例代码。自定义指令的强大能力可以让我们更加方便灵活的操作 HTML 元素和属性，更好地实现业务需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649947de48841e9894644523