Javascript 角度4-将文本复制到剪贴板

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

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

我已经看过了。但是，此包需要引用输入元素并从该输入元素复制文本。在我的用例中，文本需要动态创建，然后添加到剪贴板

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

---

我是否可以使用ngx剪贴板复制到剪贴板，或者是否有另一个软件包使我能够实现这一点

您需要对图像使用

ngxClipboard

指令。以下是您需要如何使用它来解决您的问题：

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

---

执行用于将文本复制到剪贴板的

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

函数更改如下，以调用copytextoclipboard函数

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

---

这里是另一个快速而肮脏的选项，不需要第三方库或模块

在模板中

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

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

---

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

在模板中

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

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

使用NgxClipboard的已批准答案的问题（稍后由OP强调）是无法动态设置内容

使用（单击）事件侦听器不起作用，因为它是在ngxClipboard执行后触发的

因此，只需使用@Input getter定义[cbContent]，然后忘记（单击）事件：

在模板中：

<button ngxClipboard [cbContent]="foo">Click me</button>

---

ngx剪贴板现在不需要您使用输入元素。现在更直接了，提供了几种方法。一种方法是简单地使用剪贴簿服务。第三，文件

import { ClipboardService } from 'ngx-clipboard'

constructor(private _clipboardService: ClipboardService){
...
}
copy(text: string){
  this._clipboardService.copyFromContent(text)
}

但对我来说，这不起作用。我在编译时收到了一些警告，提示没有满足对等依赖关系。因为我使用的是Angular 4，所以这些警告是我预料到的。 但是，如果上述解决方案不适合您，有一种简单的方法可以通过@ViewChild实现这一点

在html中：

<textarea name="copyText" #copyText id="" style="opacity: 0;height: 0;"></textarea>

---

这只是Angular的@ViewChild的简单的香草javascript方法，谢谢。这会给我一条错误消息，说cbContent不是img的已知属性—“无法绑定到'cbContent'，因为它不是'img'的已知属性。”在您的AppMAMPLE导入中必须包含<代码> FuffsMase< /C>和<代码> ClipboardModule <代码>。然后它将工作，它会处理错误。但是，有一个问题。它不考虑在CopyToCopyBooad（）中更新的文本。函数，但获取调用该函数之前的textToCopy值。textToCopy:string='Hello'；copytolipboard（）{this.textToCopy=this.textToCopy+'！你好！；}将被复制的文本是“你好”，而不是“你好！你好！”。有没有办法复制更新后的文本？ngxClipboard效果很好-最新版本公开了一个

（cbOnSuccess）

事件，您可以使用它来钩住它，而不是使用

单击事件。这应该可以解决上面提到的特殊问题，使用
单击事件来捕获。始终错误：目标应该是ClipboardService.push../node_modules/ngx clipboard/dist/src/clipboard.service.js.ClipboardService.isTargetValidBrowse上的输入或文本区域r支持？Internet Explorer 11I没有需要从中获取文本的文本区域。文本将来自服务，一旦用户单击“复制”图标，就会调用服务，该服务将生成文本，然后需要将此文本复制到剪贴板。它将动态创建文本区域。您不需要它。您需要做的就是s更改中提到的
copyToClipboard
功能answer@kayasa在异步调用中，您将无法将文本复制到剪贴板。您应该有可用的文本，或者调用应该是同步的。此解决方案工作正常。他正在创建dom并取消选择，angular的问题是没有找到选择方法typescript中的编译器，但在本例中，他正在创建一个文本区域元素并附加要复制的文本，以这种方式选择（）方法已启用。谢谢！@GangadharJannu是否只有在成功复制操作后才删除textarea？如果复制操作失败，它是否保留在DOM中？如果不希望文本在单击后保持选中状态，只需添加元素即可。setSelectionRange（0，0）；execCommandYes，谢谢…@jbojcic如何使用它来复制多个HTML元素。我认为这应该是可以接受的答案，因为它比为这个简单的任务添加一些第三方模块更优雅：）
import { ClipboardService } from 'ngx-clipboard'

constructor(private _clipboardService: ClipboardService){
...
}
copy(text: string){
  this._clipboardService.copyFromContent(text)
}

<textarea name="copyText" #copyText id="" style="opacity: 0;height: 0;"></textarea>

@ViewChild('copyText', { read: ElementRef }) copyText: ElementRef;

copyText() {
    const element = this.copyText.nativeElement;
    element.value = 'some text';
    element.focus();
    element.select();
    document.execCommand('copy');
}