1 什么是HTML

　　HTML文档就是一个纯文本文件，该文件包含了HTML元素、CSS样式以及JavaScript代码；HTML元素是由标签呈现，浏览器会为每个标签创建带有属性的DOM对象，浏览器通过渲染这些DOM节点来呈现内容，用户在浏览器中看到的内容就是浏览器渲染DOM对象后的结果。

2 指令的分类

　　组件、属性指令、结构性指令

3 指定义指令常用到的一些常量

3.1 Directive

　　　　用于装饰控制器类来指明该控制器类是一个自定义指令控制器类

　3.2 ElementRef

　　　　作为DOM对象的引用使用，通过构造器进行依赖注入，它的实例代表标注有自定义指令那个元素的DOM对象；每个标注了自定义指令的元素都会自动拥有一个ElementRef对象来作为该元素DOM对象的引用（前提：在自定义指令的控制器中依赖注入了ElementRef）

　　3.3 Render2

　　　　Render2的实例是用来操作DOM节点的，因为Angular不推荐直接操作DOM节点；Render2是从Angular4才开始支持的，之前的版本是使用的Render；每个标注有自定义指令的元素都会拥有一个Render2实例来操作该元素的DOM属性（前提：在自定义指令的控制器中依赖注入了Render2）

　3.4 HostListener

　　　　用于装饰事件触发方法的注解

4 自定义 属性指令

　　一个自定义的属性指令需要一个有@Directive装饰器进行装饰的控制器类

@H_404_47@

4.1 实现自定义 属性指令

4.1.1 创建自定义 属性指令控制类

　　　　　　技巧01：创建一个模块来专门放自定义指令

@H_404_47@

4.1.2 在控制器类中依赖注入ElementRef　　

@H_404_47@

4.1.3 通过ElementRef实例改变标有自定义指令元素对应的DOM对象的背景颜色　

@H_404_47@

　　　　4.1.3 在自定义指令模块中指定exports　

@H_404_47@

　　　　4.1.4 将自定义指令模块导入到需要用到指定指令的组件所在的模块中

　　　　　　技巧01：自定义指令一般会被多次用到，所以一般会将自定义指令模块导入到共享模块在从共享模块导出，这样其它模块只需要导入共享模块就可以啦

dioModule,MdRadioButton } from '@angular/material'; import { FormsModule,ReactiveFormsModule } from '@angular/forms'; import { HttpModule } from '@angular/http'; import { DirectiveModule } from '../directive/directive.module'; @NgModule({ imports: [ CommonModule,RouterModule,FormsModule,ReactiveFormsModule,HttpModule,MdToolbarModule,DirectiveModule,MdRadioModule ],declarations: [],exports: [ CommonModule,MdRadioButton ] }) export class SharedModule { } @H_404_47@

　　　　4.1.5 在组件中使用自定组件对应的选择器即可

　　　　　　自定义指令的选择器是由@Directive装饰器的selector元数据指定的

　在元素中直接标注自定义指令的选择器就行啦　　

自定义属性指令@H_404_47@

实现自定义指令的按钮

@H_404_47@

404_47@ @H_404_47@ @H_404_47@

　　　　4.1.6 代码汇总

Metadata/lifecycle_hooks'; @Directive({ selector: '[appDirectiveTest02]' }) export class DirectiveTest02Directive implements OnInit { constructor( private el: ElementRef ) {} ngOnInit() { this.el.nativeElement.style.backgroundColor = 'skyblue'; } } @H_404_47@