当你想在Angular应用程序中引入自定义指令时，npm包angular-directives-in-views可以是一个很好的选择。这个包提供了一种简便的方法来编写自定义指令，并在应用程序中使用它们。在这篇文章中，我们将学习如何使用npm包angular-directives-in-views。
安装
安装angular-directives-in-views很简单，只需要运行下面的命令：
npm install angular-directives-in-views --save
使用
要使用npm包angular-directives-in-views，首先需要在Angular模块中将其导入。打开app.module.ts文件，并添加以下代码：
import { directivesInView } from 'angular-directives-in-views';
@NgModule({
imports: [
directivesInView
]
})
export class AppModule { }现在我们已经将npm包angular-directives-in-views导入我们的应用程序中，接下来，我们将创建一个自定义指令，并在应用程序中使用它。
创建指令
要创建一个自定义指令，需要使用angular.Directive装饰器和@HostListener注释。在下面的示例中，我们将创建一个名为HighlightDirective的指令，它将在鼠标悬停在其所在元素上时高亮显示。
-- -------------------- ---- -------
------ - ---------- ----------- ------------ - ---- ----------------
------------
--------- ----------------
--
------ ----- ------------------ -
------------------- --- ----------- - -
--------------------------- -------------- -
-------------------------
-
--------------------------- -------------- -
---------------------
-
------- ---------------- ------- -
------------------------------------------- - ------
-
-我们将这个指令命名为HighlightDirective，并使用@Directive装饰器将其标记为自定义指令。在@Directive装饰器中，我们使用选择器指定该指令将应用于哪些元素。
接下来，我们定义了构造函数，它接受了一个ElementRef参数。这个参数允许我们访问指令所在元素的引用。我们还定义了两个带有@HostListener注释的事件监听器：
- onMouseEnter - 当鼠标悬停在元素上时触发
- onMouseLeave - 当鼠标离开元素时触发
这些方法都调用了将我们之前定义的highlight方法。这个方法接受一个颜色值，并设置当前元素的背景颜色。
使用指令
现在我们已经创建了自定义指令，接下来将在我们的应用程序中使用它。我们将在app.component.html文件中添加一个按钮，并将HighlightDirective应用于该按钮：
<button appHighlight>Hover me</button>
运行应用程序，将鼠标悬停在按钮上，你应该可以看到它变为黄色。
在上面的示例中，我们使用属性选择器将HighlightDirective应用于按钮。你还可以使用类选择器或元素选择器来应用指令。
总结
在本文中，我们学习了如何使用npm包angular-directives-in-views来创建自定义Angular指令。我们创建了一个指令，它在鼠标悬停在元素上时将其背景颜色更改为黄色。我们还学习了如何将指令应用于按钮，并在应用程序中使用它。
我希望这篇文章对你有帮助，并且能够给你提供创建自定义指令的信心和指导。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562fc81e8991b448e0cb1