angular - কৌণিক 5-ক্লিপবোর্ডে অনুলিপি করুন




typescript angular5 (3)

আমি একটি আইকন প্রয়োগ করার চেষ্টা করছি যা ক্লিক করা হলে ব্যবহারকারীর ক্লিপবোর্ডে একটি পরিবর্তনশীল সংরক্ষণ করবে। আমি বর্তমানে বেশ কয়েকটি গ্রন্থাগার চেষ্টা করেছি এবং এর মধ্যে কেউই এটি করতে সক্ষম হয় নি।

আমি কৌনিক 5 এ ব্যবহারকারীর ক্লিপবোর্ডে কীভাবে কোনও ভেরিয়েবল সঠিকভাবে অনুলিপি করব?


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

স্ট্যাকব্লিটজ demo

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"] লক্ষ্য করুন window["clipboardData"] e.clipboardData window["clipboardData"] e.clipboardData জন্য প্রয়োজনীয় কারণ এটি ই- window["clipboardData"] e.clipboardData বোঝে না


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

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

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


সমাধান 1: যে কোনও পাঠ্য অনুলিপি করুন

এইচটিএমএল

<button (click)="copyMessage('This goes to Clipboard')" value="click to copy" >Copy this</button>

.ts ফাইল

copyMessage(val: string){
    let 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: কাস্টম নির্দেশিকা

আপনি যদি কোনও কাস্টম নির্দেশিকা ব্যবহার করতে পছন্দ করেন তবে ড্যান দোহাতারুর উত্তর যা ClipboardEvent ব্যবহার করে কার্যকর করা একটি মার্জিত সমাধান তা পরীক্ষা করে দেখুন।





angular5