Angular 5 - 复制到剪贴板

Question

我正在尝试实现一个图标，单击该图标会将变量保存到用户的剪贴板。我目前已经尝试了几个库，但没有一个能够这样做。

如何在 Angular 5 中正确地将变量复制到用户的剪贴板？

Answer 1

解决方案 1:复制任何文本

HTML

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

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

---

解决方案 2:从文本框复制

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

Demo Here

---

解决方案 3: 导入第 3 方指令 ngx-clipboard

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

---

解决方案 4:自定义指令

如果您更喜欢使用自定义指令，请查看 Dan Dohotaru 的 answer这是一个使用 ClipboardEvent 实现的优雅解决方案。

---

解决方案 5: Angular Material

Angular material 9 + 用户可以使用 built-in clipboard复制文本的功能。还有一些可用的自定义设置，例如限制复制数据的尝试次数。