从Angular Material v9开始，它现在有了一个剪贴板CDK

剪贴板|角材料

它可以简单地使用

<button [cdkCopyToClipboard]="This goes to Clipboard">Copy this</button>

在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>

第一个建议的解决方案是有效的，我们只需要改变

selBox.value = val;

To

selBox.innerText = val;

也就是说,

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.innerText = val;
    document.body.appendChild(selBox);
    selBox.focus();
    selBox.select();
    document.execCommand('copy');
    document.body.removeChild(selBox);
  }

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

我知道这已经高度投票在这里到现在为止，但我宁愿去一个自定义指令的方法，并依赖于ClipboardEvent的@jockeisorby建议，同时也确保侦听器被正确删除(相同的功能需要为添加和删除事件侦听器提供)

stackblitz试样

import { Directive, Input, Output, EventEmitter, HostListener } from "@angular/core";

@Directive({ selector: '[copy-clipboard]' })
export class CopyClipboardDirective {

  @Input("copy-clipboard")
  public payload: string;

  @Output("copied")
  public copied: EventEmitter<string> = new EventEmitter<string>();

  @HostListener("click", ["$event"])
  public onClick(event: MouseEvent): void {

    event.preventDefault();
    if (!this.payload)
      return;

    let listener = (e: ClipboardEvent) => {
      let clipboard = e.clipboardData || window["clipboardData"];
      clipboard.setData("text", this.payload.toString());
      e.preventDefault();

      this.copied.emit(this.payload);
    };

    document.addEventListener("copy", listener, false)
    document.execCommand("copy");
    document.removeEventListener("copy", listener, false);
  }
}

然后像这样使用它

<a role="button" [copy-clipboard]="'some stuff'" (copied)="notify($event)">
  <i class="fa fa-clipboard"></i>
  Copy
</a>

public notify(payload: string) {
   // Might want to notify the user that something has been pushed to the clipboard
   console.info(`'${payload}' has been copied to clipboard`);
}

注意:IE需要窗口["clipboardData"]，因为IE不理解e.clipboardData

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

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)”。