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复制到剪贴板,还是有另一个包可以让我实现这个目的？

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 { }

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

Answer 3

这是复制到剪贴板的最简单方法.

在您的模板中

<button (click)="copyToClipboard(sharableLink)">Copy link</button>
<input type="text" value="This is the value to copy" #sharableLink>

在组件中

copyToClipboard(element) {
    element.select();
    document.execCommand('copy');
    this.toaster('success', 'Success!', 'Link copied to clipboard.');
  }

Answer 4

这里是另一个快速而又脏的选项,无需第三方库或模块.取自这里

在您的模板中

<a class="accent" (click)="copyLink(textToCopy)">{{textToCopy}}</a>

在你的组件中

copyLink(text:string) {
        const event = (e: ClipboardEvent) => {
            e.clipboardData.setData('text/plain', text);
            e.preventDefault();
            // ...('copy', e), as event is outside scope
            document.removeEventListener('copy', e);
        }
        document.addEventListener('copy', event);
        document.execCommand('copy');
    }