關於 angular + 頁面復制粘貼功能

 <div class="user-token-content" *ngIf="tokenMark">
    <div class="token-card">
      <div class="token-card-content" id="copyInput"> {{tokenContent}} </div>
      <div class="token-card-control">
        <span nz-tooltip nzTitle="復制token" (click)="copyToken()">
          <i nz-icon type="copy" theme="outline"></i>
        </span>
        <nz-divider nzType="vertical"></nz-divider>
        <span nz-tooltip nzTitle="刪除token">
          <a  nz-popconfirm nzTitle="是否刪除當前token?" (nzOnConfirm)="confirm()" (nzOnCancel)="cancel()">
            <i nz-icon type="delete" theme="outline"></i>
          </a>
        </span>
      </div>
    </div>
  </div>

// 復制token
// .ts文件

  copyToken() {
    const copyEl = this.elementRef.nativeElement.querySelector('#copyInput');
    const range = document.createRange();
    range.selectNode(copyEl);
    window.getSelection().removeAllRanges();
    window.getSelection().addRange(range);
    document.execCommand('copy');
    this.createMessage('success', '復制成功');
  }

• 效果
•