Скопируйте текст в буфер обмена с помощью angular 2

Копирование текста в буфер обмена звучит довольно просто, но поверьте мне, мне потребовалось много времени, чтобы заставить его работать для всех браузеров и устройств.

Самый простой способ сделать это - использовать javascript «execCommand».

public copyText(textToBeCopied) {
    let textarea = null;
    textarea = this.document.createElement("textarea");
    textarea.style.height = "0px";
    textarea.style.left = "-100px";
    textarea.style.opacity = "0";
    textarea.style.position = "fixed";
    textarea.style.top = "-100px";
    textarea.style.width = "0px";
    document.body.appendChild(textarea);
    // Set and select the value (creating an active Selection range).
    textarea.value = textToBeCopied;
    textarea.select();
    // Ask the browser to copy the current selection to the clipboard.
    let successful = document.execCommand("copy");
    if (successful) {
      // do something
    } else {
      // handle the error
    }
    if (textarea && textarea.parentNode) {
      textarea.parentNode.removeChild(textarea);
    }
  }

В приведенном выше коде я использую javascript «execCommand» для копирования текста в буфер обмена. При этом мы динамически создаем элемент textarea с высотой и шириной как 0px, а также устанавливаем другие свойства, чтобы не отображать это textarea в пользовательском интерфейсе. Затем присвойте требуемое значение этому текстовому полю, выберите содержимое с помощью метода select () и вызовите execCommand, чтобы скопировать этот текст в буфер обмена. После копирования удалите это динамически созданное текстовое поле.

Единственным недостатком использования этого метода является то, что метод execCommand не работает в браузере Safari, а также, если вы используете рендеринг на стороне сервера в angular 2, вы не можете использовать объект документа окна.

В качестве альтернативы я нашел другой плагин javascript для копирования текста в буфер обмена, который называется clipboard.js. Но вопрос в том, как использовать clipboard.js с angular 2 ????

Чтобы использовать clipboard.js с angular 2, сначала вы должны включить файл clipboard.js в атрибут «scripts» .angular-cli.json, или, если вы используете webpack или systemJS, выполните необходимую конфигурацию для использования clipboard.js в своем приложении. . Вы можете найти этот файл по ссылке ниже.

Чтобы использовать clipboard.js с angular 2, я создам собственный ClipboardDirective. Так что я могу использовать его где угодно в вашем проекте. Реализация директивы следующая.

import { EventEmitter, ElementRef, Output, Input, Directive } from '@angular/core';
declare var Clipboard: any ;
@Directive({
  selector: '[clipboard]'
})
export class ClipboardDirective {
  clipboard: any;
  @Input('clipboard')
  elt:ElementRef; 
  @Output()
  clipboardSuccess:EventEmitter<any> = new EventEmitter();
  @Output()
  clipboardError:EventEmitter<any> = new EventEmitter();
  
  constructor(private eltRef:ElementRef) {
  }
  
  ngOnInit() {
    this.clipboard = new Clipboard(this.eltRef.nativeElement, {
      target: () => {
        return this.elt;
      }
    });
    this.clipboard.on('success', (e) => {
      this.clipboardSuccess.emit();
    });
    this.clipboard.on('error', (e) => {
      this.clipboardError.emit();
    });
  }
  
  ngOnDestroy() {
    if (this.clipboard) {
      this.clipboard.destroy();
    }
  }
}

Мы хотим иметь возможность прикрепить буфер обмена к элементу с помощью директивы и предоставить в качестве параметра элемент DOM, с которым мы хотим связать. Значение, указанное в указанном целевом элементе, будет использоваться для копирования его текста. Вот пример использования:

<div>
  <input #elementToCopy/>
  <button [clipboard]="elementToCopy (clipboardSuccess)="onSuccess()" (clipboardError)="onError()">Copy</button>
</div>

Вы также можете реализовать методы для успешного и неудачного копирования события в соответствии с требованиями.

Выполнено!!! Это все, что вам нужно сделать, чтобы скопировать текст в буфер обмена.