6.揭秘angular2学习 ------- 指令

1指令简介

1. 指令作用在特定的DOM元素上，扩展元素的功能与行为。
2. 组件继承自指令，可以理解为是一种带有视图的指令。
3. HTML的某些元素带有特定的属性，这些属性被HTML解析，元素就有了特定的功能与行为。指令也一样，将指令以属性的形式挂在DOM元素上，扩展功能与行为。
4. 自定义指令通常以小驼峰式命名法命名。

2指令分类

1. 属性型指令。
   
   • 以元素属性的形式来使用的指令。
   • 通常被用来改变元素的外观和行为。
   • 内置指令例子：NgStyle
2. 结构型指令。
   
   • 改变DOM树的结构（增加活删除DOM元素，从而改变DOM的布局）。
   • 与属性型指令的使用方式相同，都是以元素属性的形式使用。
   • 内置指令例子：NgIf
3. 组件。
   
   • 组件继承自指令，只不过比指令多了模版。
   • 组件的部分声明周期钩子与指令相同，如下图

钩子方法	作用
ngOnInit	在Angular完成初始化输入属性的数据绑定后，初始化指令/组件
ngOnChanges	在Angular初始化输入属性的数据绑定前响应一次，之后当监测到数据绑定发生变化后就会被调用，这个方法接受一个包含当前和之前数据的SimpleChanges对象
ngDoCheck	用于变化监测，该钩子方法会在每次变化监测发生时被调用
ngOnDestroy	在Angular销毁指令/组件之前执行清理工作，此时应注销观察者对象或者解绑事件处理器以避免内存泄漏

组件、指令不同之处：
1. 组件不是以HTML元素属性的形式使用，而是以自定义标签的形式使用。
2. 组件可作为HTML元素的扩展，将自身模版视图插入到DOM中，而属性、结构型指令是对HTML元素的扩展。
3. 因为指令中不具有模版，所以下面生命周期钩子是组件独有而指令不具备的：

• ngAfterContentInit
• ngAfterContentChecked
• ngAfterViewInit
• ngAfterViewChecked

3内置指令

内置指令根据使用场景不同可分为以下三类：
1. 通用指令
- NgClass
- NgStyle
- NgIf
- NgSwitch、NgSwitchCase、NgSwitchDefault
- NgFor
- NgTemplateOutlet
2. 路由指令
- RouterLink
- RouterOutlet
- RouterLinkActive
3. 表单指令
- ngModel、NgModelGroup、NgForm
- FromControlDirective、FormControlName、FormArrayName
- FormGroupDirective、FormGroupName
- NgSelectOption、NgSelectMultipleOption、NgControlStatus、NgControlStatusGroup
- DefaultValueAccessor、NumberValueAccessor、SelectControlValueAccessor、SelectMultipleControlValueAccessor、CheckboxControlValueAccessor、RadioControlValueAccessor
- RequiredValidator、MinLengthValidator、MaxLengthValidtor、PatternValidatpor

3.1通用指令

1. Angular将通用指令包含在CommonModule模块中，当需要使用这些通用指令时，需要在模块中导入。
2. BrowserModule模块已经包含了CommonModule模块，所以当引入BrowserModule时，就可以使用了。
3. 在模版中已经对通用指令讲解，这里不再赘述。

3.2表单指令

表单指令包含了一系列在表单中使用的指令，这些指令被包含在下列三个模块中：
1. FormsModule
2. ReactiveFormsModule
3. InternalFormsSharedModule

3.2.1FormsModule模块

FormsModule模块包含：
- NgModel 指令
- NgModelGroup 指令
- NgForm 指令
- InternalFormsSharedModule模块中包含的指令

在表单章节中已经对上述几个表单指令将结果，这里也不再赘述。

3.2.2ReactiveFormsModule模块

ReactiveFormsModule模块包含：
- FormControlDirective 指令
- FormGroupDirective 指令
- FormControlName 指令
- FormGroupName 指令
- FormArrayName 指令
- InternalFormsSharedModule模块中包含的指令

#### 3.2.2.1 FromControlDirective指令