कोणीय 5 - क्लिपबोर्ड पर कॉपी करें

Question

मैं एक आइकन लागू करने का प्रयास कर रहा हूं कि जब क्लिक किया जाएगा तो उपयोगकर्ता के क्लिपबोर्ड पर एक चर बचाएगा। मैंने वर्तमान में कई पुस्तकालयों की कोशिश की है और उनमें से कोई भी ऐसा करने में सक्षम नहीं है।

मैं एंगुलर 5 में उपयोगकर्ता के क्लिपबोर्ड पर एक चर को कैसे ठीक से कॉपी कर सकता हूं?

Comments

आप ngxyz-c2c का उपयोग कर सकते हैं , इसे करने के कई तरीके हैं।

— अंकित सिंह

यदि आप कोणीय सामग्री का उपयोग कर रहे हैं तो संस्करण 9.0.0 (6 फरवरी, 2020 को जारी किया गया) ने क्लिपबोर्ड पैकेज का उपयोग करने के लिए सुपर आसान पेश किया । कोणीय दस्तावेज और @ नबेल का उत्तर देखें ।

— जॉर्ज हॉकिंस

Answer 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: आयात एक 3 पार्टी निर्देश एनजी-क्लिपबोर्ड

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

समाधान 4: कस्टम निर्देश

यदि आप एक कस्टम निर्देश का उपयोग करना पसंद करते हैं, तो दान दोहतरू के उत्तर की जांच करें जो कि एक सुरुचिपूर्ण समाधान का उपयोग करके कार्यान्वित किया गया है ClipboardEvent।

Comments

महान विचार है, लेकिन मैंने आपके 2 समाधान की नकल की है और मैं Cannot read property 'select' of undefinedकोणीय 6. में मिलता रहता हूं। क्या यह कोणीय 6-संगत है?

— स्लीपविन

@ मुझे लगता है कि यह किसी भी तरह से कोणीय संस्करण से संबंधित नहीं है। क्या आपने अपने इनपुट में `# userinput` जोड़ा है?

— संग्राम नंदखिले

@SangramNandkhile मैंने बार-बार चेक किया, लेकिन अभी भी वही त्रुटि है। यह मेरा कोड है <input *ngIf="invitation_code" type="text" readonly value="{{invitation_code}}" #userinput > <button *ngIf="code_success" (click)="copyInputMessage(userinput)" value="click to copy" > Copy code </button>धन्यवाद

— आस्तीन का जूल

तुम भी निकाल सकते हैं position, left, top, और opacity। और एक साथ बदलेंselBox.style.height = '0';

— मेंडी

मामूली समस्या, का उपयोग नहीं करना चाहिए

— स्टीफन ड्यूमोंट

Answer 2

मुझे पता है कि यह पहले से ही अब तक यहाँ पर अत्यधिक मतदान किया गया है, लेकिन मैं एक कस्टम निर्देशात्मक दृष्टिकोण के लिए जाऊंगा और क्लिपबोर्ड पर निर्भर रहूंगा क्योंकि @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

Comments

यह एक पुन: प्रयोज्य निर्देश बनाने के लिए यश। महान विचार!

— रॉड

वास्तव में, संस्करण 12.x कुछ के साथ शुरू, सफारी फिर से समस्याग्रस्त है :)

— डैन दोहतरू

एक न्यूनतम वर्कअराउंड रेंज बनाने और उस रेंज को चयन में जोड़ने के लिए होगा, एक वर्किंग सॉल्यूशन इस तरह दिखेगा स्टैकब्लिट्ज़.com

— Dan Dohotaru

विंडो ["क्लिपबोर्डडैट"] IE में मेरे लिए अपरिभाषित है? कोई उपाय ?

— विक्टर जोज्विकी

यह मोबाइल पर काम नहीं करता, मैं NGX-क्लिपबोर्ड प्लगइन बजाय प्रयोग किया

— -catalin

Answer 3

मुझे लगता है कि पाठ की प्रतिलिपि बनाते समय यह बहुत अधिक क्लीनर समाधान है:

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

और फिर html में क्लिक इवेंट पर बस copyToClipboard को कॉल करें। (क्लिक करें) = "copyToClipboard ( 'texttocopy')"

Comments

इस तथ्य के कारण IE पर काम नहीं करता है कि e.clipboardData परिभाषित नहीं है।

— डैन डोटहरू

इसके अलावा रिमूवलिस्टर भी काम नहीं करता है क्योंकि मूल श्रोता को एक तर्क के रूप में पारित करने की आवश्यकता होती है

— डैन डोटहरू

काम करने वाले श्रोता को निकालने के तरीके के लिए यहां देखें: stackoverflow.com/a/51843984/3849445

— user123959

कोणीय 6 में ठीक काम करता है! क्रोम में परीक्षण किया गया। धन्यवाद।

— Moreirapontocom

Answer 4

कोणीय सामग्री v9 के रूप में, अब इसमें एक क्लिपबोर्ड CDK है

क्लिपबोर्ड | कोणीय सामग्री

यह बस के रूप में इस्तेमाल किया जा सकता है

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

Comments

यह एक सम्मोहन की तरह काम करता है। कभी नहीं पता था कि एक उचित समाधान है!

— अब्दुल्ला फ़िरोज़

कोणीय सामग्री v9 से उपलब्ध है।

— andreivictor

Answer 5

जॉकाइज़रबी के उत्तर का संशोधित संस्करण जो ईवेंट हैंडलर को ठीक से नहीं हटाए जाने को ठीक करता है।

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

Comments

फ़ायरफ़ॉक्स में काम नहीं कर रहा है। त्रुटि -document.execCommand(‘cut’/‘copy’) was denied because it was not called from inside a short running user-generated event handler

— ऑप्टिमस

Answer 6

आप इसे कोणीय मॉड्यूल का उपयोग करके प्राप्त कर सकते हैं:

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

Answer 7

संदेश की प्रतिलिपि बनाने के लिए नीचे विधि का उपयोग किया जा सकता है: -

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

Comments

यह वास्तव में एक अच्छा उपाय है। मैंने इसे अपने आवेदन के लिए आज़माया और यह काम कर गया। धन्यवाद।

— जयहिंद

Answer 8

कोणीय में ऐसा करने का सबसे अच्छा तरीका है और कोड को सरल रखना इस परियोजना का उपयोग करना है।

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>

Answer 9

कोणीय सीडीके का उपयोग कर कॉपी करें,

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

Answer 10

पहले सुझाए गए समाधान कार्य, हमें बस बदलने की आवश्यकता है

selBox.value = val;

सेवा

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