在 Angular 中，指令和组件是构建 Web 应用程序的基本构建块之一。指令是用于修改 DOM 元素行为的一种方式，而组件则是指令的一个特殊类型，它具有自己的视图和状态。在本文中，我们将深入研究如何在 Angular 中构建可重用的指令和组件，以便您可以更好地组织您的代码并促进代码复用。
构建可重用的指令
指令是 Angular 中最基本的构建块之一。它们允许您将特定的行为应用于 DOM 元素。指令可以用于添加事件监听器，修改样式，添加 CSS 类等。要构建可重用的指令，需要遵循以下步骤：
1. 创建一个指令
在 Angular 中，可以使用 @Directive 装饰器创建一个指令。例如，以下代码创建了一个简单的指令，它在鼠标悬停在元素上时添加了一个 CSS 类：
-- -------------------- ---- -------
------ - ---------- ----------- ------------ - ---- ----------------
------------
--------- ----------------
--
------ ----- ------------------ -
------------------- --- ----------- --
--------------------------- -------------- -
-------------------------
-
--------------------------- -------------- -
---------------------
-
------- ---------------- ------- -
------------------------------------------- - ------
-
-在上面的代码中，我们使用 @Directive 装饰器创建了一个名为 HighlightDirective 的指令。我们还定义了一个构造函数，它使用 ElementRef 服务来获取当前元素的引用。然后，我们使用 @HostListener 装饰器来监听鼠标进入和离开事件，并在这些事件发生时调用 highlight() 方法来修改元素的背景颜色。
2. 导出指令
要在其他组件或指令中使用指令，必须将其导出。要导出指令，请将其添加到 exports 数组中，如下所示：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------ - ---- ------------------ ------ - ------------------ - ---- ------------------------ ----------- ------------- --------------------- -------- --------------- -------- -------------------- -- ------ ----- ------------ --
在上面的代码中，我们创建了一个名为 SharedModule 的模块，并将 HighlightDirective 添加到 declarations 数组中。我们还将 CommonModule 添加到 imports 数组中，以便我们可以在我们的指令中使用常用的 Angular 指令。最后，我们将 HighlightDirective 添加到 exports 数组中，以便其他组件或指令可以使用它。
3. 在组件中使用指令
要在组件中使用指令，只需将其添加到组件的模板中。例如，以下代码显示了如何在组件的模板中使用 HighlightDirective：
<div appHighlight> Hover over me to highlight </div>
在上面的代码中，我们将 HighlightDirective 添加到 div 元素上，这意味着当鼠标悬停在该元素上时，指令将会应用。
构建可重用的组件
组件是 Angular 中另一个重要的构建块。它们允许您将应用程序拆分为可重用的部分，并在应用程序的不同部分之间共享数据和状态。要构建可重用的组件，需要遵循以下步骤：
1. 创建一个组件
在 Angular 中，可以使用 @Component 装饰器创建一个组件。例如，以下代码创建了一个简单的组件，它显示了一个带有标题和正文的卡片：
-- -------------------- ---- -------
------ - ---------- ----- - ---- ----------------
------------
--------- -----------
--------- -
---- -------------
------ ----- -------
----- ---- ------
------
--
------- -
-
----- -
------- --- ----- -----
-------- -----
------- -----
-
-
-
--
------ ----- ------------- -
-------- ------ -------
-------- ----- -------
-在上面的代码中，我们使用 @Component 装饰器创建了一个名为 CardComponent 的组件。我们还定义了一个模板，该模板显示了一个带有标题和正文的卡片。我们还定义了一些样式，以便我们可以将它们应用于卡片。最后，我们定义了两个输入属性，以便我们可以在组件中传递数据。
2. 导出组件
要在其他组件或指令中使用组件，必须将其导出。要导出组件，请将其添加到 exports 数组中，如下所示：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------ - ---- ------------------ ------ - ------------- - ---- ------------------- ----------- ------------- ---------------- -------- --------------- -------- --------------- -- ------ ----- ------------ --
在上面的代码中，我们创建了一个名为 SharedModule 的模块，并将 CardComponent 添加到 declarations 数组中。我们还将 CommonModule 添加到 imports 数组中，以便我们可以在我们的组件中使用常用的 Angular 指令。最后，我们将 CardComponent 添加到 exports 数组中，以便其他组件或指令可以使用它。
3. 在组件中使用组件
要在组件中使用组件，只需在组件的模板中使用它。例如，以下代码显示了如何在组件的模板中使用 CardComponent：
<app-card title="Welcome" body="Hello, world!"></app-card>
在上面的代码中，我们将 CardComponent 添加到模板中，并使用输入属性传递数据。
结论
在本文中，我们深入研究了如何在 Angular 中构建可重用的指令和组件。我们发现，要构建可重用的指令和组件，需要遵循一些简单的步骤，例如创建指令或组件，导出它们，并在其他组件或指令中使用它们。希望这篇文章能够帮助您更好地组织您的代码并促进代码复用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6760017b03c3aa6a56fb9e14