Angular学习之以Tooltip为例了解自定义指令( 二 ) _生活百科

).rootNodes[0] as HTMLElement; document.body.appendChild(domElem); } // 删除 tooltip protected destroyTooltip() { if(this.componentRef) { this.appRef.detachView(this.componentRef.hostView); // 移除视图 this.componentRef.destroy(); } } // 监听鼠标移入 @HostListener('mouseover') OnEnter() { this.createTooltip(); } // 监听鼠标移出 @HostListener('mouseout') OnOut() { this.destroyTooltip(); }}到这里，已经完成了 99% 的功能了，下面我们在页面上调用即可。
页面上调用
我们在 user-list.component.html 上添加下面的内容：
<p style="margin-top: 100px;">  <span [appTooltip]="'Hello Jimmy'" style="margin-left: 200px; width: 160px; text-align: center; padding: 20px 0; display: inline-block; border: 1px solid #999;" >Jimmy</span></p>TooltipDirective 这个指令我们已经在 app.module.ts 上进行声明，我们直接调用即可。目前的效果如下：

文章插图

我们实现的 tooltip 是底部居中展示，也就是我们平常使用框架，比如 angular ant design 中 tooltip 的 bottom 属性。对于其他属性，读者感兴趣的话，可以进行扩展。
至此，我们可以很好的维护自己编写的指令文件了。
更多编程相关知识，请访问：编程入门！！
以上就是Angular学习之以Tooltip为例了解自定义指令的详细内容，更多请关注电脑自学网其它相关文章！

Angular学习之以Tooltip为例了解自定义指令( 二 )

推荐阅读

带梓的女孩名字及寓意

学生会活动策划方案范文经典学生会活动策划范文

12星座女谁是小野猫谁是小奶猫

月光石手链有什么寓意月光石有什么寓意

粉色的粘土小玫瑰diy

倚的组词倚的组词组

2023武汉中考志愿填报规则详解 2021年武汉中考志愿填报时间

关于深圳市万科教育发展基金会简述深圳市万科教育发展基金会

没有足够的可用内存来运行此程序没有足够的可用内存来运行程序

缓刑是什么意思还要坐牢吗缓刑是什么意思

有一个“撩妹高手”的儿子，是种什么样的体验？

南阳多少人「南阳多少人口2020总人数」

什么是事故车,如何鉴定车子撞到什么程度算事故车

秋季喝什么汤最好秋季喝什么汤最养生

绝地求生刺激战场军团名字怎么改？军团名字修改攻略[多图]

梦见大鱼吃小鱼

文房四宝指什么文房四宝指什么数字

OPPO Reno6简单评测 oppo reno6有nfc吗

怎么判断二手车的真实行驶里程? 要看哪些细节

双子座成功人士知多少？