কৌণিক 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: তৃতীয় পক্ষের নির্দেশনা এনজিএক্স-ক্লিপবোর্ড আমদানি করুন

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

সমাধান 4: কাস্টম নির্দেশিকা

আপনি যদি কাস্টম নির্দেশিকা ব্যবহার করতে পছন্দ করেন তবে ড্যান দোহাতারুর উত্তর যাচাই করে নিন যা ব্যবহার করে প্রয়োগ করা একটি মার্জিত সমাধান ClipboardEvent।

Comments

দুর্দান্ত ধারণা, তবে আমি আপনার দ্বিতীয় সমাধানটি অনুলিপি করেছি এবং আমি Cannot read property 'select' of undefinedকৌণিক 6 এ পেতে থাকি this এটি কি কৌনিক 6- সামঞ্জস্যপূর্ণ?

— শোভন

@ স্লুইন আমি মনে করি এটি কোনওভাবেই কৌণিক সংস্করণের সাথে সম্পর্কিত। ডিআইডি আপনি কি নিজের ইনপুটটিতে user # ব্যবহারকারী ইনপুট` যুক্ত করবেন?

— সংগ্রাম নন্দখিলে

@ সংগ্রামরাম নান্দখিলে আমি বারবার যাচাই করেছি, কিন্তু এখনও একই ত্রুটি। এটি আমার কোড <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

আমি জানি যে এটি ইতিমধ্যে এখানে ইতিমধ্যে সর্বোচ্চ ভোট দেওয়া হয়েছে, তবে আমি বরং একটি কাস্টম নির্দেশিক পদ্ধতির জন্য যাব এবং @ জোকিসাইজারবিয়ের পরামর্শ অনুসারে ক্লিপবোর্ড এভেন্টের উপর নির্ভর করব, শ্রোতা সঠিকভাবে সরানো হয়েছে কিনা তা নিশ্চিত করে (একই ফাংশনটি সরবরাহ করা প্রয়োজন) ইভেন্ট শ্রোতার যোগ এবং অপসারণ উভয়ের জন্য)

স্ট্যাকব্লিটজ ডেমো

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 কিছু দিয়ে শুরু করে, সাফারি আবার সমস্যাযুক্ত :)

— ড্যান দোহাতারু

একটি ন্যূনতম পরিসীমা হবে একটি ব্যাপ্তি তৈরি করা এবং সেই ব্যাপ্তিটি নির্বাচনের সাথে যুক্ত করা, একটি কার্যক্ষম সমাধানটি দেখতে হবে এই স্ট্যাকব্লিটজ

— ড্যান দোহাতারু

উইন্ডো ["ক্লিপবোর্ডডাটা"] আইই-তে আমার জন্য অপরিবর্তিত? কোন ধারণা ?

— ভিক্টর জোজউইকি

এটি মোবাইলে কাজ করে না, আমি এর পরিবর্তে এনজিএক্স-ক্লিপবোর্ড প্লাগইন ব্যবহার করেছি

— দ্য ক্যাটালিন

Answer 3

আমি মনে করি পাঠ্য অনুলিপি করার সময় এটি আরও অনেক পরিষ্কার সমাধান:

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

এবং তারপরে এইচটিএমএল ক্লিক ইভেন্টে কপিরাইটটোক্লিপবোর্ডটি কল করুন। (ক্লিক করুন) = "copyToClipboard ( 'texttocopy')"

Comments

ই-ক্লিপবোর্ড ডেটা সংজ্ঞায়িত না হওয়ার কারণে IE এ কাজ করে না।

— ড্যান দোহাতারু

তদুপরি মুছে ফেলার কাজটিও কাজ করে না কারণ আসল শ্রোতাদের একটি যুক্তি হিসাবে পাস করা দরকার

— ড্যান দোহাতরু

: এখানে কিভাবে অপসারণ ঘটনা শ্রোতা কাজ করে তার জন্য দেখুন stackoverflow.com/a/51843984/3849445

— user123959

কৌণিক 6 তে কাজ করে! ক্রোমে পরীক্ষিত। ধন্যবাদ.

— moreirapontocom

Answer 4

কৌণিক উপাদান v9 হিসাবে, এটি এখন একটি ক্লিপবোর্ড সিডিকে রয়েছে

ক্লিপবোর্ড | কৌণিক উপাদান

এটি হিসাবে সহজ হিসাবে ব্যবহার করা যেতে পারে

<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';

প্রোগ্রামিয়ালি স্ট্রিংটি অনুলিপি করুন: মাইকম্পোনমেন্ট.স,

class MyComponent {
  constructor(private clipboard: Clipboard) {}

  copyHeroName() {
    this.clipboard.copy('Alphonso');
  }
}

এইচটিএমএল মাধ্যমে অনুলিপি করতে একটি উপাদান ক্লিক করুন:

<button [cdkCopyToClipboard]="longText" [cdkCopyToClipboardAttempts]="2">Copy text</button>

তথ্যসূত্র: https://matory.angular.io/cdk/clipboard/overview

Answer 10

প্রথম প্রস্তাবিত সমাধান কাজ করে, আমাদের কেবল পরিবর্তন করা দরকার

selBox.value = val;

প্রতি

selBox.innerText = val;

অর্থাত,

এইচটিএমএল:

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