快速理解angular4之自定义directive

第一次写这种文章，各位大牛们见谅。

十分沉迷于费曼这个人，(主要是因为长的太帅) 读了一本关于他的书，又在油管上面看了他的各种视频，对他的学习方法十分沉迷。

”如果你能让一个五岁小孩理解一个知识，那么你就真的掌握了“。并不是把各位看官说成五岁小孩，而是，用浅显易懂的语言和你们解释这个知识点，或者用法，以至于就算你是一个框架使用初学者，你也能够快速掌握。

言简意赅，绝不拖延。

正题开始。

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前辈,”