Angular复制功能--ngxClipboard

Posted 2022-12-08 头名字W

ngx-clipboard适用angular2及更高的版本，且从angualr 6.0.0版本开始不再依赖任何js文件。

依赖条件

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

安装方式

npm安装
npm install ngx-clipboard --save

yarn安装
yarn add ngx-clipboard --dev

使用

在所在的主（子）模块文件中引入，eg: app.module.ts， 导入

import  ClipboardModule  from 'ngx-clipboard';

imports: [
    ClipboardModule,
]

参数说明

• ngxClipboard 指令 必选

• cbContent 必选

  [cbContent]=“model” cbContent的值可以是其他input标签的ngModel，

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

  也可以是字符串值[cbContent]="‘copy text’" (注意可以使用目标父容器来避免焦点陷阱问题)

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

使用ClipboardService的copyFromContent() 复制任何您动态创建的文本。

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