在Typescripte定義要監聽的事件，並在事件發生時，有相應的變化，可應用在樣式的改變、增加新的class屬性等等。

  1. 在typescript檔案內定義

將檔案命名為open.directive.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { Directive, HostBinding, HostListener} from '@angular/core';

<!-- 定義這個directive如何被呼叫 -->
@Directive({
    selector: '[appOpen]'
})
export class OpenDirective {
    <!-- 當isOpen為true，會加上open這個class，並預設值為false -->
    @HostBinding('class.open') isOpen = false;

    <!-- 點擊觸發事件，轉換isOpen的boolean值 -->
    @HostListener('click') toggleOpen() {
        this.isOpen = !this.isOpen;
    }
}
  1. 在html加上這個屬性

當div被點擊，isOpen的值會轉換為true，就會為div加上open這個class～

1
<div appOpen>...</div>