Angular replicación --ngxClipboard

NGX-portapapeles angular2 aplicable y versiones superiores, y comenzaron a ya no dependen de los archivos js desde angualr versión 6.0.0.

dependencias

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

montaje

npm安装
npm install ngx-clipboard --save

yarn安装
yarn add ngx-clipboard --dev

uso

Donde se introduce la (sub) Archivo del módulo principal, por ejemplo: app.module.ts, importación

import { ClipboardModule } from 'ngx-clipboard';

imports: [
    ClipboardModule,
]

Descripción del parámetro

• ngxClipboard comando requeridos

• cbContent Obligatorio

  [CbContent] = "modelo" cbContent ngModel otros valores puede ser etiqueta de entrada,

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

  Puede ser un valor de cadena [cbContent] = "" copia de texto "( nota de que el contenedor primario se puede usar para evitar ciertos problemas se centran trampa )

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

  También se puede configurar para introducir el destino

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

• función de devolución

  El éxito de devolución de llamada

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

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

  La falta de devolución de llamada

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

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

  Utilizar copyFromContentdesde ClipboardServicela copia de cualquiera de sus creada dinámicamente texto.

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

  También puede utilizar la estructura de mando * ngxClipboardIfSupported condicionalmente generar el elemento de acogida

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

  proceso de copia mundial

  Una copia del proceso de respuesta a escala global, puede suscribirse copyResponse$por la exposiciónClipboardService

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

  Después de cada portapapeles para copiar, utilizar este módulo para limpiar el área de texto temporal

  Por defecto, sólo para destruirlo al destruir comando. Si desea destruirlo después de cada copia en el portapapeles, por favor proporcione la siguiente configuración del módulo de nivel raíz.

  ClipboardService.configure({ cleanUpAfterCopy: true });