利用Angular elementRef實現一鍵複製功能

前言

因爲在以前有個項目須要實現一鍵複製功能，一開始大多數都會想着本身用js手寫封着。後來發現angular有個機制，能夠很簡單的實現一鍵複製功能。

 

背景

Angular 的口號是 - 「一套框架，多種平臺。同時適用手機與桌面 (One framework.Mobile & desktop.)」，即 Angular 是支持開發跨平臺的應用，好比：Web 應用、移動 Web 應用、原生移動應用和原生桌面應用等。爲了可以支持跨平臺，Angular 經過抽象層封裝了不一樣平臺的差別，統一了 API 接口。如定義了抽象類 Renderer 、抽象類 RootRenderer 等。此外還定義瞭如下引用類型：ElementRef、TemplateRef、ViewRef 、ComponentRef 和 ViewContainerRef 等。下面咱們就來分析一下 ElementRef 類：

 

ElementRef做用

在應用層直接操做 DOM，就會形成應用層與渲染層之間強耦合，致使咱們的應用沒法運行在不一樣環境，如 web worker 中，由於在 web worker 環境中，是不能直接操做 DOM。對web worker 有興趣的能夠去閱讀了解下支持的類和方法。經過 ElementRef 咱們就能夠封裝不一樣平臺下視圖層中的 native 元素 (在瀏覽器環境中，native 元素一般是指 DOM 元素)，最後藉助於 Angular 提供的強大的依賴注入特性，咱們就能夠輕鬆地訪問到 native 元素。

首先，先對比下以前寫的

<p id="copyText" title="內容" (click)="isShow = true" *ngIf="!isShow">內容</p>
        <textarea id="copyUp" (click)="isShow = false" *ngIf="isShow"> 內容</textarea>
        <span (click)="copyUrl(isShow ? 'copyUp' : 'copyText')">複製</span>

copyUrl(type) {
        let cont;
        if (type === 'copyUp') {
            $('#copyUp').select();
            document.execCommand('copy');
            cont = $('#copyUp').text();
        } else {
            $('#copyText').select();
            document.execCommand('copy');
            cont = $('#copyText').text();
        }
        let flag = this.copyText(cont);
        flag ? LayerFunc.successLayer('複製成功!') : LayerFunc.errorLayer('複製失敗!');
    }
    copyText(text) {
        let textarea = document.createElement('input'); // 建立input對象
        let currentFocus = document.activeElement; // 當前得到焦點的元素
        document.body.appendChild(textarea); // 添加元素
        textarea.value = text;
        textarea.focus();
        let flag;
        if (textarea.setSelectionRange) textarea.setSelectionRange(0, textarea.value.length);
        // 獲取光標起始位置到結束位置
        else textarea.select();
        try {
            flag = document.execCommand('copy'); // 執行復制
        } catch (eo) {
            flag = false;
        }
        document.body.removeChild(textarea); // 刪除元素
        return flag;
    }
}

利用添加一個 textarea標籤，經過textarea的select方法選中文本，而後再經過瀏覽器提供的copy 命令，將textarea中的內容複製下來的方法。

 

再看看利用ElementRef實現的一鍵複製

首先去註冊ElementRef

import { Component, OnInit, ElementRef } from '@angular/core';

而後在constructor引入

constructor(
        private elementRef: ElementRef
    ) {}

 

<input type="text" id="copy_value" vlaue="">內容
<button (click)="copyText(內容值)">複製</button>

 

copyText(text: string) {
      const input = this.elementRef.nativeElement.querySelector('#copy_value');
      input.value = text;
      input.select();
      document.execCommand('copy');
      LayerFunc.successLayer('複製成功');
    }

 

總結

在利用angular開發的時候能夠多學習angular機制，會發如今一些功能的開發上，用好了它自身封好的方法，其實有不少地方能夠避免沒必要要代碼，有時寫原生的時候可能會過於繁雜，有些方法缺能夠很簡單的去幫你實現，減小了代碼量。