屬性型指令學習

建立一個簡單的屬性型指令使用屬性型指令響應用戶引起的事件使用 @Input 數據綁定向指令傳遞值綁定到第二個屬性參考文獻

在 Angular 中有三種類型的指令：

1. 組件 — 擁有模板的指令
2. 結構型指令 — 經過添加和移除 DOM 元素改變 DOM 佈局的指令
3. 屬性型指令 — 改變元素、組件或其它指令的外觀和行爲的指令。

組件是這三種指令中最經常使用的。 你在快速上手例子中第一次見到組件。

結構型指令修改視圖的結構。例如，NgFor 和 NgIf。 要了解更多，參見結構型指令 guide。

屬性型指令改變一個元素的外觀或行爲。例如，內置的 NgStyle 指令能夠同時修改元素的多個樣式。

建立一個簡單的屬性型指令

在命令行窗口下用 CLI 命令 ng generate directive 建立指令類文件。

ng g directive components3/highlight
複製代碼

CLI 會建立 src/app/components3/highlight.directive.ts 及相應的測試文件（src/app/components3/highlight.directive.spec.ts），而且在根模塊 AppModule 中聲明這個指令類。

生成的 highlight.directive.ts 文件以下：

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

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {

  constructor() { }

}
複製代碼

修改該文件，內容以下：

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

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {

  constructor(public el: ElementRef) {
    el.nativeElement.style.backgroundColor = 'yellow';
  }

}
複製代碼

使用屬性型指令

在 home3.component.html 文件中使用定義的屬性型指令。

<p appHighlight>Highlight me!</p>
複製代碼

實際效果以下：

響應用戶引起的事件

上述案例中 appHighlight 只是簡單的設置元素的顏色。接下來咱們但願這個指令可以實現這麼一個功能：在用戶鼠標懸浮一個元素時，設置它的顏色。

修改 highlight.directive.ts 文件以下：

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

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {

  //鼠標進入作出響應
  @HostListener('mouseenter') onMouseEnter(){
    this.highlight('yellow');
  }

  //鼠標離開作出響應
  @HostListener('mouseleave') onMouseLeave() {
    this.highlight(null);
  }

  constructor(public el: ElementRef) {
  }

  private highlight(color: string) {
    this.el.nativeElement.style.backgroundColor = color;
  }
}
複製代碼

實際效果爲：

當把鼠標移到 p 上的時候，背景色就出現了，而移開時就消失了。

使用 @Input 數據綁定向指令傳遞值

上述的案例只是知足了用戶最簡單的一個需求，可是這不夠靈活，用戶但願可以指定選擇哪一種顏色進行高亮。

此時咱們的 highlight.directive.ts 文件須要另外引入 Input，以下：

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

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {

  @Input() highlightColor: string;

  constructor(public el: ElementRef) {
  }

  // 鼠標進入作出響應
  @HostListener('mouseenter') onMouseEnter() {
    this.highlight(this.highlightColor || 'red');
  }

  // 鼠標離開作出響應
  @HostListener('mouseleave') onMouseLeave() {
    this.highlight(null);
  }

  private highlight(color: string) {
    this.el.nativeElement.style.backgroundColor = color;
  }
}
複製代碼

把 home3.component.ts 改爲這樣：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home3',
  templateUrl: '
    <h1>My First Attribute Directive</h1>

    <h4>Pick a highlight color</h4>
    <div>
      <input type="radio" name="colors" (click)="color='lightgreen'">Green
      <input type="radio" name="colors" (click)="color='yellow'">Yellow
      <input type="radio" name="colors" (click)="color='cyan'">Cyan
    </div>
    <p appHighlight [highlightColor]="color">Highlight me!</p>
  '
})
export class Home3Component implements OnInit {

  color: string;
  constructor() { }

  ngOnInit(): void {
  }

}
複製代碼

可是咱們發現下列指令綁定變量的寫法有點複雜。

<p appHighlight [highlightColor]="color">Highlight me!</p>
複製代碼

若是能夠在應用該指令時在同一個屬性中設置顏色就更好了，就像這樣：

<p [appHighlight]="color">Highlight me!</p>
複製代碼

[appHighlight] 屬性同時作了兩件事：把這個高亮指令應用到了

元素上，而且經過屬性綁定設置了該指令的高亮顏色。 你複用了該指令的屬性選擇器 [appHighlight] 來同時完成它們。 這是清爽、簡約的語法。

在 @Input 的參數中把該選擇器指定爲別名。

@Input('appHighlight') highlightColor: string;
複製代碼

在指令內部，該屬性叫 highlightColor，在外部，你綁定到它地方，它叫 appHighlight。

最終修改完畢後，頁面實際效果以下：

綁定到第二個屬性

上述案例的指令只有一個可定製屬性，真實的應用一般須要更多。

目前，默認顏色（它在用戶選取了高亮顏色以前一直有效）被硬編碼爲紅色。應該容許模板的開發者設置默認顏色。

把第二個名叫 defaultColor 的輸入屬性添加到 HighlightDirective 中：

此時咱們的 highlight.directive.ts 文件以下：

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

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {

  @Input('appHighlight') highlightColor: string;
  @Input() defaultColor: string;

  constructor(public el: ElementRef) {
  }

  // 鼠標進入作出響應
  @HostListener('mouseenter') onMouseEnter() {
    this.highlight(this.highlightColor || this.defaultColor || 'red');
  }

  // 鼠標離開作出響應
  @HostListener('mouseleave') onMouseLeave() {
    this.highlight(null);
  }

  private highlight(color: string) {
    this.el.nativeElement.style.backgroundColor = color;
  }
}
複製代碼

把 home3.component.ts 改爲這樣：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home3',
  templateUrl: '
    <h1>My First Attribute Directive</h1>

    <h4>Pick a highlight color</h4>
    <div>
      <input type="radio" name="colors" (click)="color='lightgreen'">Green
      <input type="radio" name="colors" (click)="color='yellow'">Yellow
      <input type="radio" name="colors" (click)="color='cyan'">Cyan
    </div>
    <p  [appHighlight]="color">Highlight me!</p>

    <h4>defaultColor is violet</h4>
    <p  [appHighlight]="color" defaultColor="violet">Highlight me too!</p>
  '
})
export class Home3Component implements OnInit {

  color: string;
  constructor() { }

  ngOnInit(): void {
  }

}
複製代碼

Angular 之因此知道 defaultColor 綁定屬於 HighlightDirective，是由於你已經經過 @Input 裝飾器把它設置成了公共屬性。

頁面實際效果：

參考文獻

官方文檔