Angular 5 - Sao chép vào khay nhớ tạm

Tôi đang cố gắng triển khai một biểu tượng mà khi được nhấp vào sẽ lưu một biến vào khay nhớ tạm của người dùng. Tôi hiện đã thử một số thư viện và không có thư viện nào có thể làm như vậy.

Làm cách nào để sao chép đúng một biến vào khay nhớ tạm của người dùng trong Angular 5?

Giải pháp 1: Sao chép bất kỳ văn bản nào

HTML

<button (click)="copyMessage('This goes to Clipboard')" value="click to copy" >Copy this</button>

tệp .ts

copyMessage(val: string){
    const selBox = document.createElement('textarea');
    selBox.style.position = 'fixed';
    selBox.style.left = '0';
    selBox.style.top = '0';
    selBox.style.opacity = '0';
    selBox.value = val;
    document.body.appendChild(selBox);
    selBox.focus();
    selBox.select();
    document.execCommand('copy');
    document.body.removeChild(selBox);
  }

Giải pháp 2: Sao chép từ TextBox

HTML

 <input type="text" value="User input Text to copy" #userinput>
      <button (click)="copyInputMessage(userinput)" value="click to copy" >Copy from Textbox</button>

tệp .ts

    /* To copy Text from Textbox */
  copyInputMessage(inputElement){
    inputElement.select();
    document.execCommand('copy');
    inputElement.setSelectionRange(0, 0);
  }

Demo tại đây

Giải pháp 3: Nhập ngx-clipboard chỉ thị của bên thứ 3

<button class="btn btn-default" type="button" ngxClipboard [cbContent]="Text to be copied">copy</button>

Giải pháp 4: Chỉ thị tùy chỉnh

Nếu bạn thích sử dụng chỉ thị tùy chỉnh, hãy xem câu trả lời của Dan Dohotaru, đây là một giải pháp thanh lịch được triển khai bằng cách sử dụng ClipboardEvent.

Tôi biết điều này đã được bình chọn cao ở đây cho đến nay, nhưng tôi muốn sử dụng phương pháp tiếp cận chỉ thị tùy chỉnh và dựa vào ClipboardEvent như @jockeisorby đã đề xuất, đồng thời đảm bảo trình nghe được xóa chính xác (cần cung cấp cùng một chức năng cho cả trình nghe sự kiện thêm và xóa)

bản demo stackblitz

import { Directive, Input, Output, EventEmitter, HostListener } from "@angular/core";

@Directive({ selector: '[copy-clipboard]' })
export class CopyClipboardDirective {

  @Input("copy-clipboard")
  public payload: string;

  @Output("copied")
  public copied: EventEmitter<string> = new EventEmitter<string>();

  @HostListener("click", ["$event"])
  public onClick(event: MouseEvent): void {

    event.preventDefault();
    if (!this.payload)
      return;

    let listener = (e: ClipboardEvent) => {
      let clipboard = e.clipboardData || window["clipboardData"];
      clipboard.setData("text", this.payload.toString());
      e.preventDefault();

      this.copied.emit(this.payload);
    };

    document.addEventListener("copy", listener, false)
    document.execCommand("copy");
    document.removeEventListener("copy", listener, false);
  }
}

và sau đó sử dụng nó như vậy

<a role="button" [copy-clipboard]="'some stuff'" (copied)="notify($event)">
  <i class="fa fa-clipboard"></i>
  Copy
</a>

public notify(payload: string) {
   // Might want to notify the user that something has been pushed to the clipboard
   console.info(`'${payload}' has been copied to clipboard`);
}

Lưu ý: lưu ý điều window["clipboardData"]cần thiết cho IE vì nó không hiểue.clipboardData

Tôi nghĩ rằng đây là một giải pháp gọn gàng hơn nhiều khi sao chép văn bản:

copyToClipboard(item) {
    document.addEventListener('copy', (e: ClipboardEvent) => {
      e.clipboardData.setData('text/plain', (item));
      e.preventDefault();
      document.removeEventListener('copy', null);
    });
    document.execCommand('copy');
  }

Và sau đó chỉ cần gọi copyToClipboard vào sự kiện nhấp chuột trong html. (click) = "copyToClipboard ('texttocopy')"

Kể từ Angular Material v9, nó hiện có một CDK clipboard

Bảng tạm | Vật liệu góc cạnh

Nó có thể được sử dụng đơn giản như

<button [cdkCopyToClipboard]="This goes to Clipboard">Copy this</button>

Phiên bản sửa đổi của câu trả lời của jockeisorby để sửa lỗi trình xử lý sự kiện không được xóa đúng cách.

copyToClipboard(item): void {
    let listener = (e: ClipboardEvent) => {
        e.clipboardData.setData('text/plain', (item));
        e.preventDefault();
    };

    document.addEventListener('copy', listener);
    document.execCommand('copy');
    document.removeEventListener('copy', listener);
}

Bạn có thể đạt được điều này bằng cách sử dụng các mô-đun Angular:

navigator.clipboard.writeText('your text').then().catch(e => console.error(e));

Phương pháp dưới đây có thể được sử dụng để sao chép thông báo: -

export function copyTextAreaToClipBoard(message: string) {
  const cleanText = message.replace(/<\/?[^>]+(>|$)/g, '');
  const x = document.createElement('TEXTAREA') as HTMLTextAreaElement;
  x.value = cleanText;
  document.body.appendChild(x);
  x.select();
  document.execCommand('copy');
  document.body.removeChild(x);
}

Cách tốt nhất để làm điều này trong Angular và giữ cho mã đơn giản là sử dụng dự án này.

https://www.npmjs.com/package/ngx-clipboard

    <fa-icon icon="copy" ngbTooltip="Copy to Clipboard" aria-hidden="true" 
    ngxClipboard [cbContent]="target value here" 
    (cbOnSuccess)="copied($event)"></fa-icon>

Sao chép bằng cdk góc,

Module.ts

import {ClipboardModule} from '@angular/cdk/clipboard';

Sao chép theo chương trình một chuỗi: MyComponent.ts,

class MyComponent {
  constructor(private clipboard: Clipboard) {}

  copyHeroName() {
    this.clipboard.copy('Alphonso');
  }
}

Nhấp vào một phần tử để sao chép qua HTML:

<button [cdkCopyToClipboard]="longText" [cdkCopyToClipboardAttempts]="2">Copy text</button>

Tham khảo: https://material.angular.io/cdk/clipboard/overview

Giải pháp được đề xuất đầu tiên hoạt động, chúng tôi chỉ cần thay đổi

selBox.value = val;

Đến

selBox.innerText = val;

I E,

HTML:

<button (click)="copyMessage('This goes to Clipboard')" value="click to copy" >Copy this</button>

tệp .ts:

copyMessage(val: string){
    const selBox = document.createElement('textarea');
    selBox.style.position = 'fixed';
    selBox.style.left = '0';
    selBox.style.top = '0';
    selBox.style.opacity = '0';
    selBox.innerText = val;
    document.body.appendChild(selBox);
    selBox.focus();
    selBox.select();
    document.execCommand('copy');
    document.body.removeChild(selBox);
  }