1 什么是HTML

　　HTML文檔就是一個純文本文件，該文件包含了HTML元素、CSS樣式以及JavaScript代碼；HTML元素是由標簽呈現，瀏覽器會為每個標簽創建帶有屬性的DOM對象，瀏覽器通過渲染這些DOM節點來呈現內容，用戶在瀏覽器中看到的內容就是瀏覽器渲染DOM對象后的結果。

 

2 指令的分類

　　組件、屬性指令、結構性指令

　　具體的知識點請參見《Angular2揭秘》

 

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裝飾器進行裝飾的控制器類

import { Directive } from '@angular/core';

@Directive({
  selector: '[appDirectiveTest02]'
})
export class DirectiveTest02Directive {

  constructor() { }

}

　　4.1 實現自定義屬性指令

　　　　4.1.1 創建自定義屬性指令控制類

　　　　　　技巧01：創建一個模塊來專門放自定義指令

ng g d directive/test/directive-test02 --spec=false --module=directive

　　　　4.1.2 在控制器類中依賴注入ElementRef　　

  constructor(
    private el: ElementRef
  ) {}

　　　　4.1.3 通過ElementRef實例改變標有自定義指令元素對應的DOM對象的背景顏色　

  ngOnInit() {
    this.el.nativeElement.style.backgroundColor = 'skyblue';
  }

　　　　4.1.3 在自定義指令模塊中指定exports

　　　　　　

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DirectiveTest01Directive } from './test/directive-test01.directive';
import { SharedModule } from '../shared/shared.module';
import { DirectiveTest02Directive } from './test/directive-test02.directive';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [
    DirectiveTest01Directive,
    DirectiveTest02Directive],
  exports: [
    DirectiveTest01Directive,
    DirectiveTest02Directive
  ]
})
  
export class DirectiveModule { }
View Code

　　　　4.1.4 將自定義指令模塊導入到需要用到指定指令的組件所在的模塊中

　　　　　　技巧01：自定義指令一般會被多次用到，所以一般會將自定義指令模塊導入到共享模塊在從共享模塊導出，這樣其它模塊只需要導入共享模塊就可以啦

　　　　　　

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { 
  MdToolbarModule,
  MdSidenavModule,
  MdIconModule,
  MdButtonModule,
  MdCardModule,
  MdInputModule,
  MdRadioModule,
  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,
    MdSidenavModule,
    MdIconModule,
    MdButtonModule,
    MdCardModule,
    MdInputModule,
    DirectiveModule,
    MdRadioModule
  ],
  declarations: [],
  exports: [
    CommonModule,
    RouterModule,
    FormsModule,
    ReactiveFormsModule,
    HttpModule,
    MdToolbarModule,
    MdSidenavModule,
    MdIconModule,
    MdButtonModule,
    MdCardModule,
    MdInputModule,
    DirectiveModule,
    MdRadioButton
  ]
})
export class SharedModule { }
View Code

　　　　4.1.5 在組件中使用自定組件對應的選擇器即可

　　　　　　自定義指令的選擇器是由@Directive裝飾器的selector元數據指定的

　　　　　　　　

　　　　　　在元素中直接標注自定義指令的選擇器就行啦

　　　　　　　

<div class="panel panel-primary">
    <div class="panel panel-heading">實現自定義屬性指令</div>
    <div class="panel-body">
        <button md-raised-button appDirectiveTest02>實現自定義指令的按鈕</button>
        <br /><br />
        <button md-raised-button>未實現自定以指令的按鈕</button>
    </div>
    <div class="panel-footer">2018-1-20 22:47:06</div>
</div>
View Code

　　　　4.1.6 代碼匯總

import { Directive, ElementRef } from '@angular/core';
import { OnInit } from '../../../../node_modules/_@angular_core@4.4.6@@angular/core/src/metadata/lifecycle_hooks';

@Directive({
  selector: '[appDirectiveTest02]'
})
export class DirectiveTest02Directive implements OnInit {

  constructor(
    private el: ElementRef
  ) {}

  ngOnInit() {
    this.el.nativeElement.style.backgroundColor = 'skyblue';
  }

}

　　4.2 給自定義屬性指令綁定輸入屬性

　　　　在4.1中實現的自定義屬性指令中背景顏色是寫死的不能更改，我們可以給指令綁定輸入屬性實現數據傳遞，從而達到動態改變的目的

　　　　4.2.1 在自定義屬性指令的控制器中添加一個輸入屬性myColor

　　　　　　

import { Directive, ElementRef, OnInit, Input } from '@angular/core';

@Directive({
  selector: '[appDirectiveTest02]'
})
export class DirectiveTest02Directive implements OnInit {

  @Input()
  myColor: string;

  constructor(
    private el: ElementRef
  ) {}

  ngOnInit() {
    this.el.nativeElement.style.backgroundColor = this.myColor;
  }

}
View Code

　　　　4.2.2 在組件中給myColor屬性賦值

　　　　　　技巧01：在給輸入屬性賦值時，等號右邊如果不是一個變量就需要用單引號括起來

　　　　　　

<div class="panel panel-primary">
    <div class="panel panel-heading">實現自定義屬性指令</div>
    <div class="panel-body">
        <button md-raised-button appDirectiveTest02 [myColor]="'red'">實現自定義指令的按鈕</button>
        <br /><br />
        <button md-raised-button>未實現自定以指令的按鈕</button>
    </div>
    <div class="panel-footer">2018-1-20 22:47:06</div>
</div>
View Code

　　　　4.2.3 效果展示

　　　　　　

　　　　4.2.4 改進

　　　　　　可以通過自定義屬性指令的選擇器來實現數據傳輸

　　　　　　》利用自定義屬性指令的選擇器作為輸入屬性myColor輸入屬性的別名

　　　　　　　　

　　　　　　》在組件中直接利用自定義指令的選擇器作為輸入屬性

　　　　　　　　

<div class="panel panel-primary">
    <div class="panel panel-heading">實現自定義屬性指令</div>
    <div class="panel-body">
        <button md-raised-button [appDirectiveTest02]="'yellow'">實現自定義指令的按鈕</button>
        <br /><br />
        <button md-raised-button>未實現自定以指令的按鈕</button>
    </div>
    <div class="panel-footer">2018-1-20 22:47:06</div>
</div>
View Code

　　　　　　》 效果展示

　　　　　　　　

　　4.3 響應用戶操作

　　　　daigengxin......2018-1-20 23:25:11