Angular 2 + 折騰記 ：(9) 初步瞭解指令，及動手一步一步寫個自定義指令

CRPER發表於2017-04-06
Angular

前言

指令這種東西，可以加強使用者體驗，減少一些重複工作;
跟著我來實現一個懸浮連結開啟的指令

效果圖

實現的功能

  • 判斷傳入的內容是否為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上的懸浮效果；
亦或者外部的值會響應的，可以在指令繫結一些動畫效果，實現資料互動體驗的加強等等。。

相關文章