web-dev-qa-db-ja.com

Angular 5 - クリップボードにコピー

クリックするとユーザーのクリップボードに変数を保存するアイコンを実装しようとしています。私は現在いくつかのライブラリを試してみましたが、どれもできませんでした。

Angular 5でユーザーのクリップボードに変数を正しくコピーする方法を教えてください。

angulartypescriptangular5
53
Sam Mallabone

解決策1：テキストをコピーする

HTML

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

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

解決策2：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ファイル

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

デモはこちら

解決策3：サードパーティの指令をインポートする ngx-clipboard

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

私はこれがすでにここで非常に投票されていることを知っていますが、カスタムディレクティブアプローチに行き、@ jockeisorbyが示唆したようにClipboardEventに依存し、同時にリスナーが正しく削除されていることを確認します（同じ関数を提供する必要がありますイベントリスナーの追加と削除の両方）

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

そして、そのようにそれを使用します

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

注：IEはwindow["clipboardData"]を理解しないため、e.clipboardDataが必要であることに注意してください。

32
Dan Dohotaru

私はこれがテキストをコピーするときはるかにきれいな解決策だと思います：

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

そして、HTMLのクリックイベントでcopyToClipboardを呼び出すだけです。 （クリック）= "copyToClipboard（ 'texttocopy'）"

30
jockeisorby