众里寻她千百度，angular directives竟然如此简单

​

众里寻她千百度，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等各大平台同步上线，敬请期待关注，欢迎洽谈合作相关事宜。