利用Angular elementRef实现一键复制功能

2021/01/07 16:26
阅读数 30

前言

由于在之前有个项目需要实现一键复制功能,一开始大多数都会想着自己用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机制,会发现在一些功能的开发上,用好了它自身封好的方法,其实有很多地方可以避免不必要代码,有时写原生的时候可能会过于繁杂,有些方法缺可以很简单的去帮你实现,减少了代码量。

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部