Angular #36 - Directives and Pipes[2]

  ng g d directives/card-hover

  import { Directive, ElementRef, OnInit, HostListener } from '@angular/core';
  @Directive({
    selector: '[cardHover]'
  })
  export class CardHoverDirective implements OnInit {
    card: any;
    constructor(private el: ElementRef) { }
    ngOnInit() {
      this.card = this.el.nativeElement.querySelector('.mdl-card');
      if (this.card.classList.contains('increase')) {
        this.card.style.backgroundColor = 'rgb(63,81,181)';
      } else if (this.card.classList.contains('decrease')) {
        this.card.style.backgroundColor = 'rgb(255,171,64)';
      } else {
        this.card.style.backgroundColor = '';
      }
    }
    @HostListener('mouseover') onMouseOver() {
      this.card.style.boxShadow = '2px 2px 1px #999';
      this.card.style.top = '-2px';
    }
    @HostListener('mouseout') onMouseOut() {
      this.card.style.boxShadow = '';
      this.card.style.top = '';
    }
  }

• 跟前面的 Directive 很相似，這裡定義了三個重要的方法
  • ngOnInit: 在 Component 初始化完所有屬性後調整其 backgroundColor
  • onMouseOver: 加上 mouseover 事件發生時調整 boxShadow 與 top 的屬性質
  • onMouseOut，同上，但是是針對 mouseout 事件
• @HostListener: 這是定義所有需要讓 Directive 監聽的事件的 Decorator，傳入的參數自然是事件的名稱

  <summary [stock]="stock" cardHover></summary>

• 重新 ng serve 啟動測試 server 後，可以看到既有的元件(SummaryCard) 只要掛上 cardHover 就會加上額外的功能(以此例是會有浮動的視覺效果/背景色的切換)
• 當然這個 Directive 也可以定義 @Input 的屬性，再依傳入的值來作後續的處理

• 當然可以用 CSS，如果情境夠單純的話
• 用 Javascript 可以取得整個 DOM 相關的資訊，可以作更複雜的處理，所以要用哪一種就看當下的情境