Angular自定义指令Tooltip

　　头条创作挑战赛
　　本文同步本人掘金平台的文章：https：juejin。cnpost7082241253819023397
　　一起养成写作习惯！这是我参与掘金日新计划4月更文挑战的第3天，点击查看活动详情。
　　Yeah，关注我的读者应该知道，上一篇文章了解Angular开发的内容，我们已经概览了Angular的相关内容。在自定义指令的部分，我们已经能够实现编写，但是，在实际场景中，我们还需要标准化的管理。
　　Angular是Angular。js的升版
　　So，本文，我们就以Tooltip来讲解下自定义指令的内容。
　　线上效果图，如下：
　　目录结构
　　在上一篇文章的实现的代码项目基础上，执行命令行：进入directives文件夹cddirectives创建tooltip文件夹mkdirtooltip进入tooltip文件夹cdtooltip创建tooltip组件nggeneratecomponenttooltip创建tooltip指令nggeneratedirectivetooltip复制代码
　　执行完上面的命令行之后，你会得到appdirectivetooltip的文件目录结构如下：tooltiptooltiptooltip组件userlist。component。html页面骨架userlist。component。scss页面独有样式userlist。component。spec。ts测试文件userlist。component。tsjavascript文件tooltip。directive。spec。ts测试文件tooltip。directive。ts指令文件复制代码
　　嗯，这里我将组件放在tooltip的同级，主要是方便管理。当然，这个因人而异，你可以放在公共组件components文件夹内。编写tooltip组件
　　在html文件中，有：｛｛data。content｝｝复制代码
　　在样式文件。scss中，有：black：000000；white：caretsize：6tooltipbg：transparentize（black，0。25）；transparentize是sass的语法gridgutterwidth：30bodybgcolor：appanimtime：200appanimcurve：stdborderradius：5zindexmax：100；：host伪类选择器，给组件元素本身设置样式：host｛position：padding：gridgutterwidth3gridgutterwidth2；backgroundcolor：color：opacity：0；transition：textalign：borderradius：zindex：｝。caret｛脱字符width：0；height：0；borderleft：6borderright：6borderbottom：6position：top：left：50；marginleft：caretsize2；borderbottomcolor：｝复制代码
　　嗯～，css是一个神奇的东西，之后会安排一篇文章来讲解下sass相关的内容。。。
　　然后，在javascript文件tooltip。component。ts内容如下：import｛Component，ElementRef，元素指向HostBinding，OnDestroy，OnInit｝Component（｛selector：apptooltip，标识符，表明我这个组件叫做啥，这里是apptooltiptemplateUrl：。tooltip。component。html，本组件的骨架styleUrls：〔。tooltip。component。scss〕本组件的私有样式｝）exportclassTooltipComponentimplementsOnInit｛publicdata：在directive上赋值privatedisplayTimeOut：组件本身host绑定相关的装饰器HostBinding（style。top）hostStyleTop！：HostBinding（style。left）hostStyleLeft！：HostBinding（style。opacity）hostStyleOpacity！：constructor（privateelementRef：ElementRef）｛｝ngOnInit（）：void｛this。hostStyleTopthis。data。elementPosition。if（this。displayTimeOut）｛clearTimeout（this。displayTimeOut）｝this。displayTimeOutsetTimeout（（：any）｛这里计算tooltip距离左侧的距离，这里计算公式是：tooltip。left目标元素的。width（tooltip。width2）this。hostStyleLeftthis。data。elementPosition。leftthis。data。element。clientWidth2this。elementRef。nativeElement。clientWidth2pxthis。hostStyleOpacity1；this。hostStyleTopthis。data。elementPosition。bottom10px｝，500）｝组件销毁ngOnDestroy（）｛组件销毁后，清除定时器，防止内存泄露if（this。displayTimeOut）｛clearTimeout（this。displayTimeOut）｝｝｝复制代码编写tooltip指令
　　这是本文的重点，具体的说明，我在代码上标注出来～
　　相关的文件tooltip。directive。ts内容如下：import｛ApplicationRef，全局性调用检测ComponentFactoryResolver，创建组件对象ComponentRef，组件实例的关联和指引，指向ComponentFactory创建的元素Directive，ElementRef，EmbeddedViewRef，EmbeddedViewRef继承于ViewRef，用于表示模板元素中定义的UI元素。HostListener，DOM事件监听Injector，依赖注入Input｝import｛TooltipComponent｝from。tooltiptooltip。Directive（｛selector：〔appTooltip〕｝）exportclassTooltipDirective｛Input（appTooltip）appTooltip！：privatecomponentRef！：ComponentRefTooltipC获取目标元素的相关位置，比如left，right，top，bottomgetelementPosition（）｛returnthis。elementRef。nativeElement。getBoundingClientRect（）；｝constructor（protectedelementRef：ElementRef，protectedappRef：ApplicationRef，protectedcomponentFactoryResolver：ComponentFactoryResolver，protectedinjector：Injector）｛｝创建tooltipprotectedcreateTooltip（）｛this。componentRefthis。componentFactoryResolver。resolveComponentFactory（TooltipComponent）绑定tooltip组件。create（this。injector）；this。componentRef。instance。data｛绑定data数据content：this。appTooltip，element：this。elementRef。nativeElement，elementPosition：this。elementPosition｝this。appRef。attachView（this。componentRef。hostView）；添加视图constdomElem（this。componentRef。hostViewasEmbeddedViewRef）。rootNodes〔0〕asHTMLEdocument。body。appendChild（domElem）；｝删除tooltipprotecteddestroyTooltip（）｛if（this。componentRef）｛this。appRef。detachView（this。componentRef。hostView）；移除视图this。componentRef。destroy（）；｝｝监听鼠标移入HostListener（mouseover）OnEnter（）｛this。createTooltip（）；｝监听鼠标移出HostListener（mouseout）OnOut（）｛this。destroyTooltip（）；｝｝复制代码
　　到这里，已经完成了99的功能了，下面我们在页面上调用即可。页面上调用
　　我们在userlist。component。html上添加下面的内容：pstylemargintop：100！〔appTooltip〕HelloJimmy是重点span〔appTooltip〕HelloJimmystylemarginleft：200width：160textalign：padding：20px0；display：border：1pxsolid999；Jimmyspan复制代码
　　TooltipDirective这个指令我们已经在app。module。ts上进行声明，我们直接调用即可。目前的效果如下：
　　我们实现的tooltip是底部居中展示，也就是我们平常使用框架，比如angularantdesign中tooltip的bottom属性。对于其他属性，读者感兴趣的话，可以进行扩展。
　　至此，我们可以很好的维护自己编写的指令文件了。
　　【完】