如何在Angular2中选择文本

时间:2017-04-05 08:03:45

标签: javascript angular

我有一个文本条目列表,后跟一个按钮:

<li *ngFor="let match of matches; let i = index">
  {{ match}} <button (click)="select(i)">Copy</button>
</li>

我想在用户按下按钮时将文本复制到剪贴板。

  public select(index:any){
    document.execCommand("copy");       
  }

这确实有效,但是,我必须首先选择相应文本的文本。我怎么能在Angular2中做到这一点?

2 个答案:

答案 0 :(得分:2)

查看usual methods

中的答案

问题是陈旧的,但前提是一样的。该标准禁止您在未明确同意将要复制的情况下使用用户的剪贴板。您无法跳过选择过程。实施方式因浏览器而异,但它几乎都是相同的。

了解详情:How can I copy to clipboard in HTML5 without using flash?

答案 1 :(得分:0)

我使用过angular2-clipboard。它适用于角度版本2.0.0及更高版本。我使用clipboard.js。有关更多信息,请参阅其文档。

依赖

  • Angular~2.0.s0

  • clipboard.js

用法如下:

在component.html文件中

<button ngIIclipboard [cbContent]="textToCopy" (cbOnSuccess)="onSuccess($event)" class="bm-action-btn clickToCopyPolicy">Click to copy text</button>

在component.ts文件中

textToCopy = "xyz";