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

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

// for copy the text
import { Clipboard } from "@angular/cdk/clipboard"; // first import this in .ts
 constructor(
    public clipboard: Clipboard
  ) { }   
 <button class="btn btn-success btn-block"(click) = "onCopy('some text')" > Copy< /button>

 onCopy(value) {
     this.clipboard.copy(value);
    }


 // for paste the copied text on button click :here is code
    
    <button class="btn btn-success btn-block"(click) = "onpaste()" > Paste < /button>
    
    onpaste() {
      navigator['clipboard'].readText().then(clipText => {
        console.log(clipText);
      });
    }

我知道这已经高度投票在这里到现在为止，但我宁愿去一个自定义指令的方法，并依赖于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)”。

对我来说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));

  }
}

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

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

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