前言

指令这种东西，可以加强用户体验，减少一些重复工作;
跟着我来实现一个悬浮链接打开的指令

效果图

实现的功能

• 判断传入的内容是否为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,.35)');
    this.r2.setStyle(this.div,'border-radius','display','none');
    this.r2.addClass(this.div,'createHoverDiv');



    if (show) {
      // 判断内容若是为url
      if (content && content.type === 'url') {
        // 创建一个a标签
        const a = this.r2.createElement('a');

        // 设置相关的样式和属性
        this.r2.setStyle(a,'#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,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上的悬浮效果； 亦或者外部的值会响应的，可以在指令绑定一些动画效果，实现数据交互体验的加强等等。。