Use Angular elementRef para realizar la función de copia con un solo clic

Prefacio

Dado que antes había un proyecto que necesitaba implementar la función de copia con un clic, la mayoría de ellos pensaría en sellarlos con escritura js. Más tarde, se descubrió que Angular tiene un mecanismo que puede realizar fácilmente la función de copia con un solo clic.

antecedentes

El lema de Angular es: "Un marco, múltiples plataformas. Aplicable a teléfonos móviles y computadoras de escritorio (Un marco. Móvil y escritorio)", es decir, Angular admite el desarrollo de aplicaciones multiplataforma, como: aplicaciones web, aplicaciones web móviles, aplicaciones nativas Aplicaciones móviles y aplicaciones nativas de escritorio, etc. Para poder soportar multiplataforma, Angular encapsula las diferencias entre diferentes plataformas a través de una capa de abstracción y unifica la interfaz API. Por ejemplo, se definen la clase abstracta Renderer y la clase abstracta RootRenderer. Además, se definen los siguientes tipos de referencia: ElementRef, TemplateRef, ViewRef, ComponentRef, ViewContainerRef, etc. Analicemos la clase ElementRef:

Rol ElementRef

La manipulación directa del DOM en la capa de aplicación dará como resultado un fuerte acoplamiento entre la capa de aplicación y la capa de renderizado, lo que provocará que nuestra aplicación no se ejecute en entornos diferentes, como los trabajadores web, porque en el entorno del trabajador web, el DOM no se puede manipular directamente. Los interesados ​​en los trabajadores web pueden leer sobre las clases y métodos compatibles. A través de ElementRef, podemos encapsular los elementos nativos en la capa de vista en diferentes plataformas (en el entorno del navegador, los elementos nativos generalmente se refieren a elementos DOM) y, finalmente, con la ayuda de la poderosa función de inyección de dependencia proporcionada por Angular, podemos acceder fácilmente elemento nativo.

Primero que nada, compara lo que escribí antes

<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;
    }
}

Use para agregar una etiqueta de área de texto, seleccione el texto a través del método de selección del área de texto y luego copie el contenido en el área de texto a través del comando de copia proporcionado por el navegador.

Echemos un vistazo a la copia de un clic implementada con ElementRef

Primero vaya a registrar ElementRef

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

Luego introduce en el 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('复制成功');
    }

En resumen

, puede aprender más sobre el mecanismo angular al desarrollar con angular. Encontrará que en el desarrollo de algunas funciones, puede usar su propio método sellado. De hecho, hay muchos lugares para evitar código innecesario. A veces puede ser demasiado cuando se escribe nativo Complejo, algunos métodos se pueden implementar fácilmente, reduciendo la cantidad de código.