指令Angular 4 - Directives

Angular中的指令是一個js類，它被宣告為@directive。Angular中有3種指令表現形式。

元件的指令

它們構成了主類，包含了元件在執行時應該如何處理、例項化和使用的詳細資訊。

結構指示

結構指令主要處理操作dom元素。結構指令在指令前有符號。例如，ngIf和*ngFor。

屬性指示

屬性指令處理修改dom元素的外觀和行為。您可以建立自己的指令。

怎麼自定義自己的指令？

採用angular-cli命令建立

ng g directive nameofthedirective
e.g
ng g directive directives/bgColor

執行命令後生成如下檔案：

CYGR-0101-01-0137deMacBook-Pro:jinadmin cygr-0101-01-0137$ ng g directive directives/bgColor
CREATE src/app/directives/bg-color.directive.spec.ts (229 bytes)
CREATE src/app/directives/bg-color.directive.ts (143 bytes)
UPDATE src/app/app.module.ts (2279 bytes)

app.module.ts檔案匯入及宣告剛建立的指令

bg-color. directive

import { Directive } from '@angular/core';
@Directive({
  selector: '[appBgColor]'
})
export class BgColorDirective {
  constructor() { }
}

怎樣使用指令？

我們要在要使用此類指令的頁面模板中新增下面的程式碼示例

<div>
   <span>hello world.</span>
</div>

<div>
   <span appBgColor>hello world.</span>
</div>

指令處理

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

@Directive({
  selector: '[appBgColor]'
})
export class BgColorDirective {
  constructor(Element: ElementRef) { 
      console.log(Element);
      Element.nativeElement.style.backgroundColor = 'red';
      Element.nativeElement.innerText="Color is changed by bgColor Directive. ";
  }
}

然後，新增此指令的dom就變成指令處理後的結果

最後可以看下渲染後的結果

---