美文网首页
快速理解angular4之自定义directive

快速理解angular4之自定义directive

作者: 妙啊啦 | 来源:发表于2017-11-26 19:30 被阅读0次

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

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

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

    言简意赅,绝不拖延。

    正题开始。

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

    相关文章

      网友评论

          本文标题:快速理解angular4之自定义directive

          本文链接:https://www.haomeiwen.com/subject/esclbxtx.html