在 Angular2 中，指令是一个很重要的概念，它用于对 DOM 元素添加特殊的行为。指令可以是自定义的，也可以是内置的，它们可以帮助我们更好地组织代码、管理数据和实现更好的视图控制。
指令的分类
在 Angular2 中，指令可以通过属性指令和结构指令来分类。属性指令用于修改 DOM 元素的行为或者样式，比如 ngClass 和 ngStyle；结构指令用于添加或删除 DOM 元素，比如 ngIf 和 ngFor。
自定义指令
除了 Angular2 内置的指令，我们也可以自定义指令来满足特定的需求。创建自定义指令的方式如下：
-- -------------------- ---- -------
------ - ---------- ----------- ------ ------ - ---- ----------------
------------
--------- ---------------
--
------ ----- ----------- ---------- ------ -
-------- ----------- -------
------------------- --- ----------- --
---------- -
------------------------------------------- - ----------------
-
-在这个例子中，我们创建了一个名为 MyDirective 的指令，它会给它所绑定的元素添加一个背景色，并且这个背景色可以通过传入的属性 myProperty 来控制。这个指令的选择器为 [myDirective]，表示所有具有 myDirective 属性的元素都将被添加上这个指令。
要使用这个指令，需要在组件模板中添加 myDirective 属性，并且传入所需的参数，如下所示：
<div myDirective [myProperty]="'red'">Hello World</div>
这样就可以看到一个带有红色背景的 div 元素了。
指令的生命周期
在 Angular2 中，指令有自己的生命周期，它包括 ngOnInit、ngOnChanges、ngDoCheck、ngAfterContentInit、ngAfterContentChecked、ngAfterViewInit 和 ngAfterViewChecked。这些生命周期钩子可以用来执行一些初始化操作、监控属性变化、与其它组件进行交互等。
例如，我们可以通过 ngOnChanges 钩子来监听 myProperty 属性的变化：
-- -------------------- ---- -------
------ - ---------- ----------- ------ --------- - ---- ----------------
------------
--------- ---------------
--
------ ----- ----------- ---------- --------- -
-------- ----------- -------
------------------- --- ----------- --
------------- -
------------------------------------------- - ----------------
-
-当 myProperty 属性发生变化时，ngOnChanges 钩子将被触发，并且我们可以在其中处理这个变化。
总结
指令是 Angular2 中一种很重要的概念，它可以帮助我们更好地组织代码、实现更好的视图控制和数据管理。自定义指令是很常见的，它可以帮助我们解决特定的需求。在编写指令时，需要关注它的生命周期，这样才能更好地使用它们。
参考
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/659205bceb4cecbf2d6ef956