Angular 4 - 将文本复制到剪贴板

Question

我在页面上有一个可点击的图标。单击此图标，我想构建一些文本并将其复制到剪贴板中

<td><img src='./assets/Copy.gif' (click)="copyToClipboard()"  /></td>

并在组件中

  copyToClipboard() {
     this.textToCopy = this.text1 + this.text2 + this.text3;
     this.toastr.info('Copied to Clipboard');
  }

我看过 https://www.npmjs.com/package/ngx-clipboard 。但是，此包需要引用输入元素并从该输入元素复制文本。在我的用例中，文本需要动态创建然后添加到剪贴板。

我可以使用 ngx-clipboard 复制到剪贴板，还是有另一个包可以让我实现这一点？

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

Answer 1

您需要对图像使用 ngxClipboard 指令。这就是您需要使用它来解决问题的方式：

 <td>
    <img src='./assets/Copy.gif' (click)="copyToClipboard()" ngxClipboard [cbContent]="textToCopy" />
</td>

请记住在您的应用程序模块中添加 ClipboardModule 。示例代码如下：

 import { ClipboardModule } from 'ngx-clipboard';

@NgModule({
  imports: [
    // Other Imports
    ClipboardModule
  ],
  // Other code
})
export class AppModule { }

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

Answer 2

用户交互对于执行 document.execCommand 是强制性的，用于将文本复制到剪贴板。

请参阅我的其他 答案。

如果你不想使用任何第三方库，你可以使用下面的代码片段将文本复制到剪贴板。

 function copyTextToClipboard(text) {
  var txtArea = document.createElement("textarea");
  txtArea.id = 'txt';
  txtArea.style.position = 'fixed';
  txtArea.style.top = '0';
  txtArea.style.left = '0';
  txtArea.style.opacity = '0';
  txtArea.value = text;
  document.body.appendChild(txtArea);
  txtArea.select();

  try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Copying text command was ' + msg);
    if (successful) {
      return true;
    }
  } catch (err) {
    console.log('Oops, unable to copy');
  } finally {
    document.body.removeChild(txtArea);
  }
  return false;
}

更改 copyToClipboard 函数如下调用copyTextToClipboard函数

copyToClipboard() {
    this.textToCopy = this.text1 + this.text2 + this.text3;
    var result = this.copyTextToClipboard(this.textToCopy);
    if (result) {
        this.toastr.info('Copied to Clipboard');
    }
}

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