前言

指令这种东西，可以加强用户体验，减少一些重复工作;

跟着我来实现一个悬浮链接打开的指令

效果图

实现的功能

• 判断传入的内容是否为url
• 创建一个悬浮tooltip
• 把对应的内容填充进去且可以访问跳转

实现的指令代码

import {Directive,  // 创建一个指令必须依赖这个装饰器ElementRef, // 获取原生dom的Input, // 接收外部数据的Renderer2, // 渲染相关的(v4+)，angular2.x 用的是Renderer(v4里面依旧标记不赞成deprecate),两者大同小异，具体看手册API的变动HostListener, // 监听事件
} from '@angular/core';@Directive({selector: '[appHoverText]',
})
export class HoverTextDirective {@Input() private appHoverText: any;public div: HTMLDivElement;constructor(private el: ElementRef,private r2: Renderer2) {this.el.nativeElement.style.position = 'relative';}// 创建元素CreateEl(show?: string, content?: any) {this.div = this.r2.createElement('div');// 往当前指令绑定的元素添加一个div的子元素this.r2.appendChild(this.el.nativeElement, this.div);// 设置div相关的样式this.r2.setStyle(this.div, 'position', 'absolute');this.r2.setStyle(this.div, 'top', '60%');this.r2.setStyle(this.div, 'left', '30%');this.r2.setStyle(this.div, 'padding', '10px');this.r2.setStyle(this.div, 'color', '#f5f5f5');this.r2.setStyle(this.div, 'cursor', 'pointer');this.r2.setStyle(this.div, 'background-color', 'rgba(0,0,0,.35)');this.r2.setStyle(this.div, 'border-radius', '10px');this.r2.setStyle(this.div, 'display', 'none');this.r2.addClass(this.div, 'createHoverDiv');if (show) {// 判断内容若是为urlif (content && content.type === 'url') {// 创建一个a标签const a = this.r2.createElement('a');// 设置相关的样式和属性this.r2.setStyle(a, 'color', '#fff');this.r2.setAttribute(a, 'target', '_blank');this.r2.setAttribute(a, 'href', content.data);a.innerText = content.data;// 追加到div里面this.r2.appendChild(this.div, a);}// 控制悬浮隐藏this.r2.setStyle(this.div, 'display', show);}}// 判断内容类型CheckContentType(e) {// url判断正则const urlRegex: any = /^(https?:\/\/)(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&\/\/=]*)$/;console.log(urlRegex.test(e));if (urlRegex.test(e)) {this.CreateEl('block', { data: e, type: 'url' });}}// 事件 ，参数 ，对应的方法@HostListener('mouseenter', ['this.appHoverText']) mymouseenter(e) {this.CheckContentType(e);}@HostListener('mouseleave') mymouseleave() {this.r2.removeChild(this.el.nativeElement, this.div);}}

指令的使用

• 在module里面引入

// 服务，要放到declarations才能生效
import { HoverTextDirective } from './hover-text.directive';@NgModule({imports: [CommonModule,],declarations: [HoverTextDirective],providers: []
})

• 在html中和常规的单向绑定用法一致

<td [appHoverText]="item.DownLoadLink" >{{item.DownLoadLink | SliceStr:0:50:'...'}}</td>

总结

指令可以实现一些非常炫的功能，比如github上的悬浮效果；

亦或者外部的值会响应的，可以在指令绑定一些动画效果，实现数据交互体验的加强等等。