アンギュラ複製--ngxClipboard

NGX-クリップボード適用angular2以上のバージョン、およびもはやangualrバージョン6.0.0から任意のJSファイルに依存しないようになりました。

依存関係

アンギュラ	NGXクリップボード
2.xの	7.xxから
4.xの	8.xx
5.xの	10.xx
9.xxの	13.xx

マウンティング

npm安装
npm install ngx-clipboard --save

yarn安装
yarn add ngx-clipboard --dev

使用

メイン（サブ）モジュールファイルが導入され、例えば：app.module.ts、インポート

import { ClipboardModule } from 'ngx-clipboard';

imports: [
    ClipboardModule,
]

パラメータ説明

• ngxClipboardコマンド必須

• cbContent必要

  【CbContent] =「モデル」cbContent ngModel他の値は、入力タグであってもよいです

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

  これは、文字列値[cbContent] =「『テキストをコピーすることも 』」（ 親コンテナが特定の問題がトラップを集中回避するために使用することができることに注意してください）

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

  また、目的地を入力するように設定することができます

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

• コールバック関数

  成功コールバック

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

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

  失敗コールバック

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

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

  使用copyFromContentからClipboardServiceあなたのいずれかのコピーを動的に作成テキストを。

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

  ngxClipboardIfSupportedは条件付きでホスト要素をレンダリング*また、コマンド構造を使用することができます

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

  グローバル・コピー処理

  地球規模での対応プロセスのコピーは、あなたが購読することができcopyResponse$暴露によってClipboardService

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

  コピーに各クリップボードた後、一時的なテキスト領域をクリーンアップするために、このモジュールを使用

  デフォルトでは、場合にのみ、このコマンドを破壊し、それを破壊します。あなたがクリップボードにコピーした後、各それを破壊したい場合は、以下のルートレベルのモジュール構成を提供してください。

  ClipboardService.configure({ cleanUpAfterCopy: true });