Angular 5 - 复制到剪贴板

Question

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

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

原文由 anonymous-dev 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

在这里演示

---

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

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

---

解决方案 4： 自定义指令

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

---

解决方案 5： 角材料

Angular material 9 + 用户可以利用 内置的剪贴板 功能来复制文本。还有一些可用的自定义设置，例如限制复制数据的尝试次数。

原文由 Sangram Nandkhile 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

很简单啊兄弟

在 .html 文件中

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

在 .ts 文件中

copyMessage(text: string) {
  navigator.clipboard.writeText(text).then().catch(e => console.log(e));
}

原文由 Learn More 发布，翻译遵循 CC BY-SA 4.0 许可协议