本章主要想介紹一下屬性型指令並建立一個簡單的屬性型指令，屬性型指令：指修改一個現有元素的外觀和行為。在模板中，它們看起來就像是標準的HTML屬性。

例如：ngModel指令就是屬性型指令的一個例子。

二. 建立屬性型指令： 首先我們的需求是建立一個指令，可以動態獲取到當前元素的寬度和高度，當寬度小於一定值時，將該元素的背景色改變。

1. 建立一個size-directive.directive.ts類，內容如下：

    Directive提供@Directive裝飾器功能。

    ElementRef注入到指令建構函式中。這樣程式碼就可以訪問到DOM元素。

    Directive裝飾器函式以配置物件引數的形式，包含了指令的元資料。

@Directive元資料之後就是該指令的控制器類，名叫sizeDirective它包含該指令的邏輯。 然後匯出sizeDirective，以便讓它能從其它元件中訪問到。

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

@Directive({
  selector: '[sizeDirective]'
})
export class SizeDirectiveDirective {

  constructor(private el: ElementRef) {
  }

  @HostListener('window:load') onLoad() {
    this.fixHeight();
    this.fixWidth();
  }

  @HostListener('window:resize') onResize() {
    this.fixHeight();
    this.fixWidth();
  }

  @HostListener('mouseenter') noMouseEnter() {
    this.el.nativeElement.style.backgroundColor = 'red';
  }

  fixHeight() {
    console.log(this.el.nativeElement.clientHeight);
  }

  fixWidth() {
    console.log(this.el.nativeElement.clientWidth);
    const width = this.el.nativeElement.clientWidth;
    if (width < 480) {
      this.el.nativeElement.style.backgroundColor = 'yellow';
    } else {
      this.el.nativeElement.style.backgroundColor = 'red';
    }
  }
}
 

2. 在將該類引入到需要的模組中，例如我需要引入到app.module.ts中：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { SizeDirectiveDirective } from './size-directive.directive';

@NgModule({
  declarations: [
    AppComponent,
    SizeDirectiveDirective
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
 

<div sizeDirective>div元素</div>

最後，div的寬度或高度進行改變後，就會根據自定義的sizeDirective指令中的邏輯，將div進行樣式的改變。