众里寻她千百度，angular directives竟然如此简单？是个人都能懂！
大家好，这一期呢，我们来谈一下angular directives。
在angular的环境中呢，有两种directives, 一种是内置的，另外一种是自定义的。
内置的directives有*ngFor, *ngIf, ngSwitch, ngClass等等。
相信你如果在用Angular的话，对以上这些都很熟悉了。
我们重点来说一下自定义的directives。
我们要创建一个directives，我们直接用Angular的命令，像这样ng g directive jetding。这个命令会添加一个directive文件,一个单元测试文件，然后并且把这个directive加到module里面。
在module里面就是添加一个声明。当然你如果不喜欢用命令行的话，你也可以自己手工添加。
Directive文件本身呢，它的selector有一个方括号[appJetDing], 前面有个APP的原因是为了避免与系统一级的directive发生冲突。
@Directive({selector:"[appJetDing]"})
export class JetDingDirective{
constructor(){}
}
当然目前这个directive是空的，不做什么事情，那我们就先搭一个框架，我们来设定这个directive已经准备好了，我们建一个div的tag，在div中使用这个directive。
<div>This is a test. </div>
<div appJetDing>This is a test. </div>
好，我们再回到我们自己的directive里面去。
这里面的第一要务就是要获取HTML的元素。获取的方法很简单，就像下面的代码。在构造函数中添加元素引用的定义。
@Directive({selector:"[appJetDing]"})
export class JetDingDirective{
constructor(private el: ElementRef){}
}
一旦获取到这个元素的实例，你就可以对这个元素进行一些操作，比如说修改颜色，字体等等属性。
el.nativeElement.style.backgroundColor="red"
可以修改这个元素的内容。
el.nativeElement.innerText = "haha " + el.nativeElement.innerText
这一期就说这些，希望对大家有所帮助。
这里是丁哥开讲，欢迎关注一起学习讨论，共同进步。
十年内计划写出超过三千六百篇文章，与超过三万名读者互动。
这些文章会在今日头条，知乎，简书，微博，微信公众平台，阿里大鱼号，Medium等各大平台同步上线，敬请期待关注，欢迎洽谈合作相关事宜。
