在 Angular2 中，自定义指令是一种很常见的需求，它可以帮助我们扩展 Angular2 的默认指令，或者实现一些特定的、与业务相关的功能。本文将介绍在 Angular2 中自定义指令的方法，包括如何定义一个指令，如何在组件中使用指令，并给出一些具体的示例。
定义一个简单的指令
在 Angular2 中，定义一个指令需要使用 @Directive 装饰器，如下所示：
import { Directive } from '@angular/core'; @Directive({ selector: '[my-directive]' }) export class MyDirective { // directive logic goes here }
其中 @Directive 装饰器的参数是一个对象，包含了指令的相关配置信息。其中最重要的一个属性是 selector，它指定了这个指令要应用到哪些元素上。在上面的例子中，我们定义的 selector 是一个属性选择器，即 [my-directive]，这意味着我们可以在 HTML 中像下面这样使用指令：
<div my-directive></div>
在上面的例子中，
指令的生命周期
在 Angular2 中，指令有自己的生命周期，可以通过实现一些特定的钩子函数来处理不同的生命周期事件。这些钩子函数的定义和用法与 Angular2 组件中的类似。下面是一些常用的生命周期钩子函数：
- ngOnInit：指令第一次被创建时调用，用于初始化指令。
- ngOnChanges：当指令绑定的输入属性发生变化时调用，用于响应属性变化。
- ngDoCheck：Angular2 每次自己的变更检测机制运行时都会调用该钩子函数，用于检测和处理指令内部的变化。
- ngOnDestroy：在 Angular2 销毁指令之前调用，用于清理指令相关的资源。
在组件中使用自定义指令
在 Angular2 组件中使用自定义指令就像使用内置指令一样简单。我们只需要在组件的模板中使用指令的选择器就可以了。例如：
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------------ --------- --------------- --------- - ---- ------------------- - -- ------ ----- ----------- - -- --------- ----- ---- ---- -展开代码
在上面的例子中，我们把自定义指令 my-directive 应用到了一个
给指令添加输入和输出属性
在 Angular2 中，指令可以定义输入和输出属性，用于实现与组件之间的数据传递。输入属性可以接收来自组件的数据，而输出属性则可以向组件发射事件。下面是如何在指令中定义输入和输出属性：
-- -------------------- ---- ------- ------ - ---------- ------ ------- ------------ - ---- ---------------- ------------ --------- ---------------- -- ------ ----- ----------- - -------- -------- ------- --------- -------- - --- ----------------------- -- --------- ----- ---- ---- -展开代码
在上面的例子中，我们定义了一个名为 myInput 的输入属性和一个名为 myOutput 的输出属性。@Input() 装饰器用于把类属性标记为输入属性，@Output() 装饰器则用于把类属性标记为输出属性，并创建一个 EventEmitter 实例来发射事件。在组件中使用指令时，我们可以通过绑定输入属性赋值的方式给指令传递数据，例如：
<div my-directive [myInput]="myValue" (myOutput)="myHandler($event)"></div>
在上面的例子中，我们给 my-directive 指令的 myInput 输入属性绑定了一个名为 myValue 的组件属性，给 myOutput 输出属性绑定了一个名为 myHandler 的组件方法，这个方法会在指令发射事件时被调用，并接收事件对象作为参数。
实例：自定义一个 Tooltip 指令
下面是一个具体的示例，演示了如何自定义一个 Tooltip 指令，并把指令应用到一个 <button> 元素上。这个指令会在鼠标悬停在按钮上时显示一个提示框，提示框的内容可以通过给指令的 message 输入属性赋值的方式指定。
-- -------------------- ---- ------- ------ - ---------- ------ ------------- ---------- - ---- ---------------- ------------ --------- ----------- -- ------ ----- ---------------- - ----------------- -------- ------- ------- -------- --------------- ------------------- --- ----------- -- -------------------------- ------------- - ------------ - ------------------------- ------------ - ------------ - ------- ------ - ------------ - ------------------------------ ------------------------ - ------------- --------------------------- - ----------- ---------------------------------- - ------- ------------------------ - ------- -------------------------- - ------ ------------------------------- - ------ ------------------------- - ------- ---------------------- - ---------------------------------- - ------- ----------------------- - ---------------------------------------- ---------------------------------------- - ------- ------ - -- -------------- - ---------------------------------------- ------------ - ----- - - -展开代码
在上面的代码中，我们定义了一个名为 TooltipDirective 的指令，选择器是 [tooltip]。指令接收一个 message 输入属性，当用户鼠标悬停在这个指令应用的元素上时，指令会在元素下方显示一个提示框，提示框的内容就是 message 属性中指定的文本。
当用户鼠标移开时，提示框就会消失。在指令的 show() 方法中，我们使用 document.createElement() 方法创建一个 DIV 元素作为提示框容器，然后把提示文本显示在 DIV 中，并设置 DIV 的样式。在 hide() 方法中，我们只需要从文档中删除提示框 DIV 就可以把提示框隐藏起来了。
现在我们可以在组件的模板中使用我们自定义的 TooltipDirective 指令了，例如：
<button [tooltip]="'Click Me!'">Hover Me</button>
在上面的例子中，我们把 <button> 元素应用了 TooltipDirective 指令，并把 message 输入属性设置为 'Click Me!'。当用户鼠标悬停在按钮上时，就会显示一个提示框，提示框中显示的内容就是 'Click Me!'。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c4391c6e1fc40e36d1d7bd
