对我来说document.execCommand('copy')给出了弃用警告，我需要复制的数据是在<div>作为textNode，而不是<input>或<textarea>。

这是我在Angular 7中的做法(灵感来自@Anantharaman和@Codemaker的回答):

<div id="myDiv"> &lt &nbsp This is the text to copy. &nbsp &gt </div>
<button (click)="copyToClipboard()" class="copy-btn"></button>

 copyToClipboard() {
    const content = (document.getElementById('myDiv') as HTMLElement).innerText;
    navigator['clipboard'].writeText(content).then().catch(e => console.error(e));

  }
}

绝对不是最好的方法，但它达到了目的。

解决方案1:复制任何文本

HTML

<button (click)="copyMessage('This goes to Clipboard')" value="click to copy" >Copy this</button>

.ts文件

copyMessage(val: string){
    const selBox = document.createElement('textarea');
    selBox.style.position = 'fixed';
    selBox.style.left = '0';
    selBox.style.top = '0';
    selBox.style.opacity = '0';
    selBox.value = val;
    document.body.appendChild(selBox);
    selBox.focus();
    selBox.select();
    document.execCommand('copy');
    document.body.removeChild(selBox);
  }

解决方案2:从文本框复制

HTML

 <input type="text" value="User input Text to copy" #userinput>
      <button (click)="copyInputMessage(userinput)" value="click to copy" >Copy from Textbox</button>

.ts文件

    /* To copy Text from Textbox */
  copyInputMessage(inputElement){
    inputElement.select();
    document.execCommand('copy');
    inputElement.setSelectionRange(0, 0);
  }

演示

解决方案3:导入第三方指令ngx-clipboard

<button class="btn btn-default" type="button" ngxClipboard [cbContent]="Text to be copied">copy</button>

解决方案4:自定义指令

如果你更喜欢使用自定义指令，查看Dan Dohotaru的答案，这是一个使用ClipboardEvent实现的优雅解决方案。

解决方案5:角材质

Angular material 9 +用户可以利用内置的剪贴板功能复制文本。还有一些更多的定制可用，例如限制复制数据的尝试次数。

以下是@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>

在Angular中做到这一点并保持代码简单的最好方法就是使用这个项目。

https://www.npmjs.com/package/ngx-clipboard

    <fa-icon icon="copy" ngbTooltip="Copy to Clipboard" aria-hidden="true" 
    ngxClipboard [cbContent]="target value here" 
    (cbOnSuccess)="copied($event)"></fa-icon>

使用angular cdk复制，

Module.ts

import {ClipboardModule} from '@angular/cdk/clipboard';

以编程方式复制一个字符串:

class MyComponent {
  constructor(private clipboard: Clipboard) {}

  copyHeroName() {
    this.clipboard.copy('Alphonso');
  }
}

点击一个元素通过HTML复制:

<button [cdkCopyToClipboard]="longText" [cdkCopyToClipboardAttempts]="2">Copy text</button>

参考: https://material.angular.io/cdk/clipboard/overview

我认为在复制文本时，这是一个更干净的解决方案:

copyToClipboard(item) {
    document.addEventListener('copy', (e: ClipboardEvent) => {
      e.clipboardData.setData('text/plain', (item));
      e.preventDefault();
      document.removeEventListener('copy', null);
    });
    document.execCommand('copy');
  }

然后在html中的click事件上调用copyToClipboard。(点击)= " copyToClipboard (texttocopy)”。