Sudut 5 - Salin ke clipboard

Saya mencoba untuk menerapkan ikon yang ketika diklik akan menyimpan variabel ke papan klip pengguna. Saat ini saya telah mencoba beberapa perpustakaan dan tidak satupun yang mampu melakukannya.

Bagaimana cara menyalin variabel dengan benar ke papan klip pengguna di Angular 5?

Solusi 1: Salin teks apa pun

HTML

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

file .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);
  }

Solusi 2: Salin dari TextBox

HTML

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

file .ts

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

Demo Disini

Solusi 3: Impor arahan ngx-clipboard pihak ketiga

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

Solusi 4: Petunjuk Kustom

Jika Anda lebih suka menggunakan arahan khusus, Periksa jawaban Dan Dohotaru yang merupakan solusi elegan yang diterapkan menggunakan ClipboardEvent.

Saya tahu ini sudah banyak dipilih di sini sekarang, tetapi saya lebih suka menggunakan pendekatan direktif kustom dan mengandalkan ClipboardEvent seperti yang disarankan @jockeisorby, sambil juga memastikan pendengar dihapus dengan benar (fungsi yang sama perlu disediakan untuk event listener add dan remove)

stackblitz demo

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

dan kemudian menggunakannya seperti itu

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

Catatan: perhatikan yang window["clipboardData"]diperlukan untuk IE karena tidak mengertie.clipboardData

Saya pikir ini adalah solusi yang jauh lebih bersih saat menyalin teks:

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

Dan kemudian panggil copyToClipboard pada acara klik di html. (klik) = "copyToClipboard ('texttocopy')"

Pada Angular Material v9, sekarang memiliki CDK clipboard

Papan klip | Bahan Sudut

Ini dapat digunakan sesederhana

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

Versi modifikasi dari jawaban jockeisorby yang memperbaiki pengendali kejadian tidak dihapus dengan benar.

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

Anda dapat mencapai ini menggunakan modul Angular:

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

Metode di bawah ini dapat digunakan untuk menyalin pesan: -

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

Cara terbaik untuk melakukan ini di Angular dan menjaga kodenya tetap sederhana adalah dengan menggunakan proyek ini.

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>

Salin menggunakan cdk sudut,

Module.ts

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

Salin string secara terprogram: MyComponent.ts,

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

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

Klik salah satu elemen untuk disalin melalui HTML:

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

Referensi: https://material.angular.io/cdk/clipboard/overview

Solusi yang disarankan pertama kali berhasil, kita hanya perlu mengubahnya

selBox.value = val;

Untuk

selBox.innerText = val;

yaitu,

HTML:

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

file .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);
  }