12、指令

内容提要

- 组件与指令之间的关系

- Angular中内置的指令（共37个）

- 指令的作用（属性型和结构型）

- 自定义属性型指令（@HostListener与@HostBinding）

- 自定义结构性指令（非常复杂，一般在业务处理中用得很少，一般是会用在封装组件库中！）

指令相关的官方文档：https://angular.cn/guide/attribute-directives

组件与指令之间的关系

Angular 1.5，1.6之后才有了组件的概念。再之前是只有指令的！

组件是一个特殊的指令。特殊之处在于，组件是可以有模板的，可以有templateUrl这样的东西。

新版本的Angular都是围绕着组件（component）来进行的。在新版本Angular中，组件（Component）本身是不用去操作dom的。操作dom的操作都是放到了directive（指令）中。

Angular中内置的指令（共37个）

参见链接：Angular 指令列表

common指令是一些通用的指令，平时用得比较多：



表单指令，大多是一些数据格式校验的指令：



路由指令：

指令的作用（属性型和结构型）

在Angular中有三种类型的指令：

- 组件：拥有模板的指令；

- 结构型指令：通过添加或移除DOM元素改变DOM布局的指令；

- 属性型指令：改变元素、组件或其他指令的外观或行为的指令。

组件

组件是三种指令中最常用的。

属性型指令

属性型指令用于改变一个DOM元素的外观或者行为，但是不改变DOM元素的结构。

结构型指令

三种最常见的结构型指令：

NgFor、NgIf和NgSwitch

由于结构型指令会改动元素，所以再同一个元素中不可以同时用多个结构型指令。

创建指令

通过命令行的angular命令创建指令：

ng generate directive MyHighLight

这个命令会自动帮我们在directives目录下自动生成下面两个文件：

my-high-light.directive.spec.ts
my-high-light.directive.ts

自定义指令需要使用到@HostListener()和@HostBinding()装饰器。

@HostListener()：用于监听事件，当事件发生时，执行方法改变元素的样式

@HostBinging()：用于直接绑定元素样式、或者绑定元素的class来显示对应样式（推荐使用class绑定的方法，可以分割样式代码和业务代码）

具体代码流程如截图：



在文件中使用自定义directive



使用HostListener



需要调用对应方法



HostBinding绑定直接的样式



样式赋值



推荐class绑定



class设置