介绍
自定义指令是 Angular 中一个重要的概念，它允许我们创建可复用的行为和 DOM 操作。在 Angular 6 中，创建自定义指令非常方便，本文将介绍如何构建一个可复用的自定义指令以及其用法和实战案例。
创建自定义指令
首先，我们需要使用 Angular CLI 创建一个新的项目。在项目中，我们可以使用以下命令创建一个自定义指令：
ng generate directive myDirective
然后，我们可以在 src/app 目录下找到 my-directive.directive.ts 文件。这是我们刚刚创建的自定义指令：
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------------ --------- ------------------ -- ------ ----- -------------------- - ------------- - - -
我们可以看到，在这个指令类中，我们定义了一个装饰器 @Directive，该装饰器指定了指令的选择器。在本例中，我们的选择器是 [appMyDirective]，表示指令将用于所有标记有 appMyDirective 属性的元素。
实现指令行为
一旦我们创建了自定义指令，就可以将其添加到 Angular 组件中，以便自定义的行为在组件中生效。让我们在 my-directive.directive.ts 文件中添加一些行为。
首先，我们将在类的构造函数中注入一个 ElementRef 对象，以便在指令中访问宿主元素。然后，我们将实现一个 hover 事件处理程序，当鼠标悬停在元素上时，将为该元素添加一个 CSS 类。
-- -------------------- ---- -------
------ - ---------- ----------- ------------ - ---- ----------------
------------
--------- ------------------
--
------ ----- -------------------- -
------------------- --- ----------- --
--------------------------- -------------- -
---------------------------------------------
-
--------------------------- -------------- -
------------------------------------------------
-
-在组件中使用自定义指令
现在我们已经创建了自己的指令，我们需要给组件添加这个指令以便其生效。为此，我们可以在组件的 HTML 模板中使用 appMyDirective 属性。
<div appMyDirective> Hover me! </div>
现在将鼠标悬停在 <div> 元素上，我们应该看到元素的背景颜色变为灰色，并且在指针离开元素时还原。
自定义指令示例
以下是一个更复杂的示例，它演示了如何使用自定义指令来创建一个可以在拖放操作中重定位元素的应用程序。
首先，我们将创建一个自定义指令 draggable，它允许我们指定一个元素，这个元素可以通过拖放来重新定位。
在 draggable.directive.ts 文件中，我们将创建一个 DraggableDirective 类，该类将在 mousedown 事件上开始监听鼠标移动，直到 mouseup 事件结束。
-- -------------------- ---- -------
------ - ---------- ----------- ------------- ------------- ------ - ---- ----------------
--------- -------- -
----- ------------
---- -------
----- -------
-
------------
--------- ----------------
--
------ ----- ------------------ -
------- --------- - ------
------- ----- -------
------- ----- -------
------- ----- ---------
--------- ------- - --- -------------------------
------------------- --- ----------- --
-------------------------- ----------- ------------------ ----------- -
-------------- - -----
--------- - ------------- - ---------------------------------
--------- - ------------- - --------------------------------
-
----------------------------------- ----------- ------------------ ----------- -
-- ---------------- -
-------------------------------- - -------------- - ---------- - -----
------------------------------- - -------------- - ---------- - -----
--------- - -
----- ----------------------
---- ------------- - ----------
----- ------------- - ---------
--
-----------------------------
-
-
--------------------------------- ----------- -
-------------- - ------
-
-接下来，我们需要将 draggable 指令添加到我们的组件模板中。以下是一个使用自定义指令的示例。
<div appDraggable (dragged)="onDragged($event)"> Drag me! </div>
appDraggable 指令内部有几个事件监听器，在鼠标按下时启动拖放，然后在鼠标移动时重新定位元素，并在鼠标释放时停止拖放。它还触发一个 dragged 事件，传递元素的位置。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
--------- -------- -
----- ------------
---- -------
----- -------
-
------------
--------- ----------------
--------- -
---- ------------ ------------------------------
---- ---
------
---- --------- ----------- ------------------------------
---- ----
------
--
------- --
-------------- -
--------- ---------
---- ----
----- ----
---------- --------------- ------
----------- -----
-------- ----
------- -----
-
-------------- -
------- ------
------ ------
------- --- ------ -----
--------- ---------
-
--------- -
-------- ----
-
--
--
------ ----- ----------------- -
--------- ---------
------------------- --------- -
------------- - ---------
-
----------------- ---- -
-- --------------- -
------------------------------------------------
----------------------------------------------
------------- - -----
-
-
-在这个简单的应用程序中，我们只是将自定义指令与 div 元素和事件和模板绑定起来，并使用 CSS 样式设置其样式和位置。
总结
在本文中，我们通过创建可重用的自定义指令来学习了 Angular 6 中的自定义指令概念。我们演示了如何构建一个自定义指令，并将其添加到组件中。我们还提供了一个实战示例，介绍了如何使用自定义指令来创建一个简单的拖放应用程序。希望这篇文章能对你学习 Angular 6 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649fce5a48841e9894c2991b