Angular replication --ngxClipboard

ngx-clipboard applicable angular2 and higher versions, and began to no longer rely on any js files from angualr version 6.0.0.

Dependencies

Angular	ngx clipboard
2.x	7.x.x
4.x	8.x.x
5.x	10.x.x
9.x.x	13.x.x

Mounting

npm安装
npm install ngx-clipboard --save

yarn安装
yarn add ngx-clipboard --dev

use

Where the main (sub) module file is introduced, eg: app.module.ts, import

import { ClipboardModule } from 'ngx-clipboard';

imports: [
    ClipboardModule,
]

Parameter Description

• ngxClipboard command Required

• cbContent Required

  [CbContent] = "model" cbContent ngModel other values ​​may be input tag,

  <input type="text" [(ngModel)]="text" placeholder="请输入内容">
  <button [ngxClipboard]="text">复制</button>
  

  It may be a string value [cbContent] = " 'copy text '" ( note that the parent container may be used to avoid certain problems focus trap )

  <button ngxClipboard [cbContent]="''copy text'">复制</button>
  

  It can also be set to enter the destination

  <input type="text" #target />
  <button [ngxClipboard]="target">Copy it</button>
  

• Callback

  Success callback

  cbOnSuccess` 复制成功后触发回调属性 `$event: {isSuccess: true, content: string}
  

  <input type="text" [(ngModel)]="text" placeholder="请输入内容">
        <button type="button" ngxClipboard [cbContent]="text" (cbOnSuccess)="successFun($event)">copy it</button>
  

  Failure callback

  cbOnError` 复制失败时会触发回调属性 `$event:{isSuccess: false}
  

  <input type="text" [(ngModel)]="text" placeholder="请输入内容">
        <button type="button" ngxClipboard [cbContent]="text" (cbOnError)="errorFun($event)">copy it</button>
  

  Use copyFromContentfrom ClipboardServicecopying any of your dynamically created text.

  import { ClipboardService } from 'ngx-clipboard'
  
  
  constructor(private clipboardService: ClipboardService){
  }
  
  copy(text: string){
    this.clipboardService.copyFromContent(text)
  }
  

  You can also use the command structure * ngxClipboardIfSupported conditionally render the host element

  <button ngxClipboard *ngxClipboardIfSupported [cbContent]="'target'" (cbOnSuccess)="isCopied = true">Copy</button>
  

  Global copying process

  A copy of the response process on a global scale, you can subscribe copyResponse$by exposureClipboardService

  export class ClipboardResponseService {
    constructor(
      private _clipboardService: ClipboardService,
      private _toasterService: ToasterService
    ) {
      this.handleClipboardResponse();
    }
  
    handleClipboardResponse() {
      this._clipboardService.copyResponse$.subscribe((res: IClipboardResponse) => {
        if (res.isSuccess) {
          this._toasterService.pop('success', undefined, res.successMessage);
        }
      });
    }
  }
  

  After each clipboard to copy, use this module to clean up temporary text area

  By default, only to destroy it when you destroy command. If you want to destroy it after each copy to the clipboard, please provide the following root-level module configuration.

  ClipboardService.configure({ cleanUpAfterCopy: true });