Angular2 是一款广受欢迎的前端框架，在构建复杂的应用程序方面表现出色。指令是 Angular2 中最重要的概念之一，它们允许开发人员增强 HTML 元素的功能，封装可重复使用的代码块。本文将介绍 Angular2 中编写应用级指令的正确姿势，并提供示例代码以帮助开发人员更好地理解。
什么是应用级指令
应用级指令（Application-level directive）是 Angular2 中一个很强大的特性，它允许我们在 Angular2 应用程序的整个生命周期中使用指令。这意味着它们可以在所有组件中使用，并且可以跨组件共享状态。应用级指令通常在多个组件中使用，并封装了一些重复的逻辑和功能。
如何编写应用级指令
创建应用级指令
在 Angular2 中，要创建一个应用级指令需要使用 @Directive 装饰器，示例如下：
import {Directive} from '@angular/core';
@Directive({
selector: '[appExampleDirective]'
})
export class ExampleDirective { }这个指令仅仅包含一个选择器 [appExampleDirective]。在使用这个指令的任何组件中，只需简单地在标签中添加它。例如：
<div appExampleDirective></div>
添加逻辑
大多数应用级指令将需要一些特定的逻辑，这通常会存储在指令的类中。在上面的示例中，如果要为这个指令添加逻辑，则需要通过依赖注入模式来引入它的依赖项。例如：
import {Directive, ElementRef} from '@angular/core';
@Directive({
selector: '[appExampleDirective]'
})
export class ExampleDirective {
constructor(private el: ElementRef) { }
}在这个例子中，ElementRef 类的实例被注入到了指令的构造函数中。使用 ElementRef 类可以方便地获取指令绑定到的 HTML 元素的引用。将逻辑和引用元素的代码添加到指令的构造函数中。
-- -------------------- ---- -------
------ ----------- ----------- ---- ----------------
------------
--------- -----------------------
--
------ ----- ---------------- -
------------------- --- ----------- -
-------------------------------------- - ------
-
-在这个示例中，指令会将元素的背景颜色更改为红色。
共享状态
应用级指令的另一个重要功能是在多个组件之间共享状态。要做到这点，我们需要使用 @Injectable 装饰器，将指令的实例转换为 Angular2 服务的形式，并使用 providers 数组将其提供给应用程序的根模块。示例代码如下：
-- -------------------- ---- -------
------ ----------- ----------- ----------- ---- ----------------
-------------
------------
--------- ------------------------
---------- -------------------------
--
------ ----- ---------------- -
------------------- --- ----------- ------- -------- ------------------------ -
-------------------------------------- - ------
---------------------------
-
-
-------------
------ ----- ----------------------- -
------- ---------- -----------------
----------------------- ----------------- -
-------------- - ----------
-
--------------------- -
-------------------------------
-
-在这个示例中，我们还添加了另一个服务 ExampleDirectiveService，用于共享状态。此服务会在应用程序中的其他组件中使用，并且具有一个对 ExampleDirective 实例的引用。注意，providers 数组中的指令现在被添加到了服务图中。
Angular2 根模块中的设置
为了使指令和服务在应用程序中全局可见，需要在应用程序的根模块（如 app.module.ts）中设置它们。请使用以下代码在根模块中导入指令和服务：
import { ExampleDirective } from './example.directive';
import { ExampleDirectiveService } from './example-directive.service';
@NgModule({
providers: [ ExampleDirectiveService ],
declarations: [ ExampleDirective ]
})
export class AppModule { }这将使应用程序的任何部分都能够访问并使用这些指令和服务。
总结
在 Angular2 中编写应用级指令，需要使用 @Directive 装饰器来创建它们，并在 providers 中指定任何需要的服务。指令的逻辑通常存储在指令的类中，并在构造函数中使用依赖注入模式引入所需的依赖项。指令和服务的实例需要在应用程序的根模块中提供，以便全局可见并使用。
这里只提供了一些基本示例，开发人员应根据需要进行自定义和扩展。使用合适的应用级指令，可以使 Angular2 应用程序更加模块化，更简洁易懂，更容易维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6595d225eb4cecbf2d9cf279