第一次寫這種文章，各位大牛們見諒。

十分沉迷于費曼這個人，(主要是因為長的太帥) 讀了一本關于他的書，又在油管上面看了他的各種視頻，對他的學習方法十分沉迷。

”如果你能讓一個五歲小孩理解一個知識，那么你就真的掌握了“。并不是把各位看官說成五歲小孩，而是，用淺顯易懂的語言和你們解釋這個知識點，或者用法，以至于就算你是一個框架使用初學者，你也能夠快速掌握。

言簡意賅，絕不拖延。

正題開始。

directive的兩個要點：@HostBind,@HostListener

在angular的世界里，我想動態的改變一個元素的樣式，我該如何處理？某種程度上，directive就是一個幫助你解決這個問題的方法。directive就像是一個監聽器，任何有關該元素的操作(event)都能夠被捕捉到。

創建一個directive

ng? g d your-directive-name

為一個元素添加directive

<p some-directive></p>

這樣，關于p元素的任何操作（click，mouseenter, mouseleave等）都可以被捕捉到。

捕捉到了操作，我現在要蓋世根據操作改變style.css，或者添加class。剛開始，通常設為false，看需求。

@HostBinding('元素綁定的屬性') 屬性變不變?/class加不加? = false

@HostListener('click/ mouseon/ mouseleave') whatever(){ this.hostbinding class加不加？/ 新的元素樣式 }

到這里就完成了自定義的directive使用的基本概念。

晚點github放代碼，解釋會更加詳細。鏈接貼下面。

“致陪我度過期末一對情侶, 工作上一直幫我的H, R, Z前輩,”