ไทป์สคริปต์ - แองกูลาร์ 5 - คัดลอกไปยังคลิปบอร์ด

ฉันกำลังพยายามที่จะใช้งานไอคอนที่เมื่อคลิกแล้วจะบันทึกตัวแปรไปยังคลิปบอร์ดของผู้ใช้ ตอนนี้ฉันได้ลองใช้ไลบรารีหลายตัวแล้ว แต่ไม่มีตัวไหนที่สามารถทำได้

ฉันจะคัดลอกตัวแปรไปยังคลิปบอร์ดของผู้ใช้อย่างถูกต้องใน Angular 5 ได้อย่างไร?

คำตอบ #1

วิธีแก้ปัญหา 1: คัดลอกข้อความใดก็ได้

เอชทีเอ็มแอล

<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: คัดลอกจากกล่องข้อความ

เอชทีเอ็มแอล

 <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: คำสั่งที่กำหนดเอง

ถ้าคุณชอบใช้ directive แบบกำหนดเอง ลองดูคำตอบของ Dan Dohotaru ซึ่งเป็นวิธีแก้ปัญหาที่สวยงามที่ถูกนำไปใช้โดยใช้ ClipboardEvent

วิธีแก้ 5: Angular Material

Angular Material 9 + ผู้ใช้สามารถใช้ฟีเจอร์คลิปบอร์ดที่มีมาในตัวเพื่อคัดลอกข้อความ มีการปรับแต่งเพิ่มเติมอีกเล็กน้อยเช่น การจำกัดจำนวนครั้งในการคัดลอกข้อมูล

คำตอบ #2

ฉันรู้ว่าสิ่งนี้ได้รับคะแนนโหวตสูงมากที่นี่แล้วในตอนนี้ แต่ฉันอยากใช้วิธีการกำหนดคำสั่งเองและพึ่งพา ClipboardEvent ตามที่ @jockeisorby แนะนำ ในขณะเดียวกันก็ต้องมั่นใจว่าตัวฟังถูกลบอย่างถูกต้อง (ฟังก์ชันเดียวกันต้องถูกใช้ทั้งในการเพิ่มและลบตัวฟังเหตุการณ์)

สแต็คบลิตซ์เดโม

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

หมายเหตุ: สังเกตว่า window["clipboardData"] จำเป็นสำหรับ IE เนื่องจากมันไม่เข้าใจ e.clipboardData

คำตอบ #3

ฉันคิดว่านี่เป็นวิธีแก้ปัญหาที่สะอาดกว่ามากเมื่อคัดลอกข้อความ:

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

จากนั้นก็เพียงเรียก copyToClipboard ในเหตุการณ์คลิกใน html (click)="copyToClipboard('texttocopy')"

คำตอบ #4

ตั้งแต่ Angular Material v9 เป็นต้นมา ตอนนี้มี clipboard CDK แล้ว

คลิปบอร์ด | Angular Material

มันสามารถใช้ได้อย่างเรียบง่ายเหมือนกับ

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

คำตอบ #5

คัดลอกโดยใช้ Angular CDK,

Module.ts

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

คัดลอกสตริงแบบโปรแกรม: MyComponent.ts,

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

คำตอบ #6

เวอร์ชันดัดแปลงของคำตอบของ jockeisorby ที่แก้ไขตัวจัดการเหตุการณ์ที่ไม่ได้ถูกลบอย่างถูกต้อง

copyToClipboard(item): void {
    let listener = (e: ClipboardEvent) => {
        e.clipboardData.setData('text/plain', (item));
        e.preventDefault();
    };

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

คำตอบ #7

คุณสามารถทำสิ่งนี้ได้โดยใช้โมดูลของ Angular:

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

คำตอบ #8

มันง่ายนะพี่ชาย

ในไฟล์ .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));
}