我试图实现一个图标,当点击将保存一个变量到用户的剪贴板。我目前已经尝试了几个库,没有一个能够做到这一点。

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


当前回答

以下方法可用于复制消息:-

export function copyTextAreaToClipBoard(message: string) {
  const cleanText = message.replace(/<\/?[^>]+(>|$)/g, '');
  const x = document.createElement('TEXTAREA') as HTMLTextAreaElement;
  x.value = cleanText;
  document.body.appendChild(x);
  x.select();
  document.execCommand('copy');
  document.body.removeChild(x);
}

其他回答

以下方法可用于复制消息:-

export function copyTextAreaToClipBoard(message: string) {
  const cleanText = message.replace(/<\/?[^>]+(>|$)/g, '');
  const x = document.createElement('TEXTAREA') as HTMLTextAreaElement;
  x.value = cleanText;
  document.body.appendChild(x);
  x.select();
  document.execCommand('copy');
  document.body.removeChild(x);
}

你可以使用Angular模块来实现:

navigator.clipboard.writeText('your text').then().catch(e => console.error(e));

以下是@Sangram的回答(以及@Jonathan的评论)的解决方案1:

(支持“不要在angular中使用普通文档”和“如果你没有必要,不要从代码中添加HTML元素……”)

// TS @ViewChild('textarea') textarea: ElementRef; constructor(@Inject(DOCUMENT) private document: Document) {} public copyToClipboard(text): void { console.log(`> copyToClipboard(): copied "${text}"`); this.textarea.nativeElement.value = text; this.textarea.nativeElement.focus(); this.textarea.nativeElement.select(); this.document.execCommand('copy'); } /* CSS */ .textarea-for-clipboard-copy { left: -10000; opacity: 0; position: fixed; top: -10000; } <!-- HTML --> <textarea class="textarea-for-clipboard-copy" #textarea></textarea>

很简单,兄弟

在.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));
}
copyCurl(val: string){
    navigator.clipboard.writeText(val).then( () => {
      this.toastr.success('Text copied to clipboard');
    }).catch( () => {
      this.toastr.error('Failed to copy to clipboard');
    });
}