在 Angular 中，指令是一种将行为和视图结合起来的方法。默认情况下，Angular 提供了多个指令，例如 ngModel 和 ngIf，这些指令可以轻松地绑定数据和控制视图的显示与隐藏。
但是，在一些特定的场景中，预定义的指令并不能满足需求。为了应对这种情况，Angular 允许我们创建自定义指令。
本文将介绍如何在 Angular 中创建可复用的自定义指令，并提供相关示例代码。
创建自定义指令
要创建一个自定义指令，我们需要使用 Angular 的 @Directive 装饰器。该装饰器告诉 Angular ，该类是一个指令。例如，以下是一个简单的自定义指令，它将速度转换为千米每小时：
-- -------------------- ---- -------
------ - ---------- ----------- ----- - ---- ----------------
------------
--------- ----------
--
------ ----- ------------ -
-------- ------- -------
------------------- --- ----------- --
---------- -
----- --- - ----------- - ----------
------------------------------- - ------- ------
-
-在上面的代码中，KmhDirective 类被标记为一个指令，使用了 @Directive 装饰器，并且具有一个 appKmh 属性。这个属性的值是我们将转换为千米每小时的速度。
在 ngOnInit 生命周期钩子函数中，我们可以访问该元素，并使用 appKmh 属性来计算千米每小时的速度。最后，我们将转换后的速度赋给元素的 innerText 属性，并将其显示在屏幕上。
如何使用自定义指令
创建这个自定义指令之后，我们可以选择性地将其应用到需要的 HTML 元素上。以下是一个演示如何使用 appKmh 指令的示例：
<p appKmh="10">10 mph</p>
在上面的示例中，我们将该指令应用于一个带有指定速度值的段落元素上。在运行该代码时，我们将看到自定义指令 for 10 mph 被转换为约 16.09 km/h。
指令的优点
自定义指令提供了许多优点，可以帮助我们更容易地开发应用程序。以下是一些指令的优点：
提高可重用性
创建解耦的自定义指令可以使其更加可重用。通过将其从组件中分离出来，我们可以将相同的功能应用于多个组件，而不必在每个组件中编写相同的代码。
分离关注点
指令可以将 DOM 操作和其他视图逻辑与组件分离，从而提高了代码的可读性和可维护性。我们可以在指令中处理视图级别的代码，而在组件中处理业务逻辑。
允许代码复用
指令可以简化模板代码，使模板更易于阅读和维护。我们可以使用指令来将某些复杂逻辑封装到一个指令中，从而可以在模板中使用更简单的语法。
总结
在本文中，我们了解了如何在 Angular 中创建可复用的自定义指令，并展示了如何使用自定义指令来实现特定的功能。通过使用自定义指令，我们可以从组件中分离出视图代码，重用代码，并提高代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64746b85968c7c53b01cb727