Angular 2 + 折腾记 ：(9) 初步了解指令，及动手一步一步写个自定义指令

前言

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

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

效果图

实现的功能

• 判断传入的内容是否为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) {
      // 判断内容若是为url
      if (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

上的悬浮效果；

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