Angular 5 - Panoya kopyala

Tıklandığında kullanıcının panosuna bir değişken kaydedecek bir simge uygulamaya çalışıyorum. Şu anda birkaç kitaplık denedim ve hiçbiri bunu yapamadı.

Angular 5'de bir değişkeni kullanıcının panosuna nasıl düzgün bir şekilde kopyalarım?

1.Çözüm: Herhangi bir metni kopyalayın

HTML

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

.ts dosyası

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

2.Çözüm: Bir TextBox'tan kopyalayın

HTML

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

.ts dosyası

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

Demo Burada

3. Çözüm: Bir 3. taraf yönergesi olan ngx-clipboard'u içe aktarın

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

Çözüm 4: Özel Direktif

Özel bir direktif kullanmayı tercih ediyorsanız, Dan Dohotaru'nun yanıtını kontrol edin, bu da kullanılarak uygulanan zarif bir çözümdür ClipboardEvent.

Bunun şimdiye kadar burada yüksek oranda oylandığını biliyorum, ancak özel bir yönerge yaklaşımını tercih ederim ve @jockeisorby'nin önerdiği gibi ClipboardEvent'e güvenirken, aynı zamanda dinleyicinin doğru bir şekilde kaldırıldığından emin olurum (aynı işlevin sağlanması gerekir) olay dinleyicileri ekleme ve kaldırma için)

Stackblitz demosu

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

ve sonra onu olduğu gibi kullanın

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

Not: window["clipboardData"]anlamadığı için IE için gerekli olduğuna dikkat edine.clipboardData

Metni kopyalarken bunun çok daha temiz bir çözüm olduğunu düşünüyorum:

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

Ve sonra html'deki click olayında copyToClipboard'u çağırmanız yeterlidir. (Tık) = "copyToClipboard ( 'texttocopy')"

Angular Material v9'dan itibaren artık bir pano CDK'sına sahip

Pano | Açısal Malzeme

Basitçe kullanılabilir

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

Jockeisorby'nin yanıtının, olay işleyicisinin düzgün şekilde kaldırılmamasını düzelten değiştirilmiş versiyonu.

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

Angular modülleri kullanarak bunu başarabilirsiniz:

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

Mesajı kopyalamak için aşağıdaki yöntem kullanılabilir: -

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

Bunu Angular'da yapmanın ve kodu basit tutmanın en iyi yolu bu projeyi kullanmaktır.

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>

Açısal cdk kullanarak kopyalayın,

Module.ts

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

Bir dizeyi programlı olarak kopyalayın: MyComponent.ts,

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

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

HTML yoluyla kopyalamak için bir öğeyi tıklayın:

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

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

İlk önerilen çözüm işe yarıyor, sadece değişmemiz gerekiyor

selBox.value = val;

için

selBox.innerText = val;

yani

HTML:

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

.ts dosyası:

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