Angulaire 5 - Copier dans le presse-papiers

Je suis en train de mettre en œuvre une icône qui lorsqu'il est cliqué permettra d'économiser une variable à l'utilisateur du presse-papiers. J'ai actuellement essayé plusieurs bibliothèques et aucun d'eux n'a été en mesure de le faire.

Comment copier une variable à l'utilisateur du presse-papiers dans Angulaire 5?

InformationsquelleAutor Sam Mallabone | 2018-03-05
  1. 116

    Solution 1: Copier n'importe quel texte

    HTML

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

    .fichier ts

    copyMessage(val: string){
    let 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);
  }

    Solution 2: Copie à partir d'une zone de texte

    HTML

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

    .fichier ts

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

    Démo Ici

    Solution 3: Importer un 3ème partie de la directive ngx-presse-papiers

    <button class="btn btn-default" type="button" ngxClipboard [cbContent]="Text to be copied">copy</button>
    • Excellente idée, mais je copiés votre 2ème solution et je reçois Cannot read property 'select' of undefined angulaire 6. Est-ce angular6-compatible?
    • Je ne pense pas que c'est lié à angulaires version en aucune façon. Avez-vous ajouter " #userinput` à votre avis?
    • J'ai vérifié encore et encore, mais toujours la même erreur. C'est mon code <input *ngIf="invitation_code" type="text" readonly value="{{invitation_code}}" #userinput > <button *ngIf="code_success" (click)="copyInputMessage(userinput)" value="click to copy" > Copy code </button> Merci
    • Vous pouvez même supprimer le position, left, top, et opacity. et de le remplacer par un selBox.style.height = '0';
    • problème mineur, doit utiliser const laissez pas
    • comment vérifier si copiés à partir de ts ?
    • Cette méthode ne fonctionne pas pour focus trapped éléments. Quelle est la solution pour focus trapped éléments? github.com/maxisam/ngx-clipboard/issues/152
    • J'ai essayé la solution 1, mais le document.executeCommand ("copier") renvoie toujours false. toute suggestion?
    • la peine de montrer que la solution 1 html peuvent être modifiés: <button (click)="copyMessage(copyButton.value)" value="click to copy" #copyButton>Copy this</button>

    InformationsquelleAutor Sangram Nandkhile
  2. 35

    Je sais que cela a déjà été très voté ici, mais je préfère aller personnalisé à la directive approche et s'appuient sur la ClipboardEvent comme @jockeisorby suggéré, tout en veillant à ce que l'auditeur est correctement supprimé (même fonction doit être fournis pour les ajouter et supprimer des écouteurs d'événement)

    stackblitz démo 

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

    et ensuite l'utiliser comme tel

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

    Note: attention, la window["clipboardData"] est nécessaire pour IE car il ne comprend pas e.clipboardData

    • Doit être acceptée pour un! Beau travail
    • Bravo pour la réalisation de ce réutilisables directive. Excellente idée!
    • Cela ne fonctionne pas avec Safari.
    InformationsquelleAutor Dan Dohotaru
  3. 31

    Je pense que c'est beaucoup plus propre solution lors de la copie de texte:

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

    Et puis il suffit d'appeler copyToClipboard sur l'événement click en html. (cliquez)="copyToClipboard('texttocopy')"

    • fonctionne parfaitement sous IE, Chrome et FF
    • ne fonctionne pas sur IE en raison du fait que l'e.clipboardData n'est pas défini.
    • en outre, le removelistener ne fonctionne pas non plus que l'original de l'auditeur doit être passé comme argument
    InformationsquelleAutor jockeisorby