Winkel 5 - In Zwischenablage kopieren

Ich versuche, ein Symbol zu implementieren, das beim Klicken eine Variable in der Zwischenablage des Benutzers speichert. Ich habe derzeit mehrere Bibliotheken ausprobiert und keine von ihnen war dazu in der Lage.

Wie kopiere ich eine Variable in Angular 5 ordnungsgemäß in die Zwischenablage des Benutzers?

Lösung 1: Kopieren Sie einen beliebigen Text

HTML

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

.ts Datei

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

Lösung 2: Kopieren aus einer TextBox

HTML

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

.ts Datei

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

Demo hier

Lösung 3: Importieren Sie eine Direktive ngx-clipboard eines Drittanbieters

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

Lösung 4: Benutzerdefinierte Richtlinie

Wenn Sie eine benutzerdefinierte Direktive bevorzugen, überprüfen Sie die Antwort von Dan Dohotaru, bei der es sich um eine elegante Lösung handelt, die mit implementiert wird ClipboardEvent.

Ich weiß, dass dies hier bereits hoch bewertet wurde, aber ich würde mich lieber für einen benutzerdefinierten Direktivenansatz entscheiden und mich auf das ClipboardEvent verlassen, wie von @jockeisorby vorgeschlagen, und gleichzeitig sicherstellen, dass der Listener korrekt entfernt wird (dieselbe Funktion muss bereitgestellt werden) für die Listener zum Hinzufügen und Entfernen von Ereignissen)

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

und dann als solches verwenden

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

Hinweis: Beachten Sie, dass das window["clipboardData"]für IE benötigt wird, da es nicht verstehte.clipboardData

Ich denke, dies ist eine viel sauberere Lösung beim Kopieren von Text:

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

Und dann rufen Sie einfach copyToClipboard beim Klickereignis in HTML auf. (click) = "copyToClipboard ('texttocopy')"

Ab Angular Material v9 verfügt es jetzt über ein CDK für die Zwischenablage

Zwischenablage | Winkelmaterial

Es kann so einfach wie verwendet werden

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

Geänderte Version von Jockeisorbys Antwort, die behebt, dass der Ereignishandler nicht ordnungsgemäß entfernt wird.

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

Sie können dies mit Angular-Modulen erreichen:

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

Die folgende Methode kann zum Kopieren der Nachricht verwendet werden: -

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

Der beste Weg, dies in Angular zu tun und den Code einfach zu halten, ist die Verwendung dieses Projekts.

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>

Kopieren mit eckigen cdk,

Module.ts

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

Kopieren Sie programmgesteuert eine Zeichenfolge: MyComponent.ts,

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

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

Klicken Sie auf ein Element, um es über HTML zu kopieren:

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

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

Der erste Lösungsvorschlag funktioniert, wir müssen ihn nur ändern

selBox.value = val;

Zu

selBox.innerText = val;

dh

HTML:

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

.ts Datei:

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