Angular CDK 工具包 Clipboard 剪贴板

这篇文章发布于

DeathGhost 编辑, 归类于angular » 当前评论0条。

Web页面中偶尔会使用到快捷复制功能操作,更常见的可能是后台数据管理项目中。如用户姓名、电话与地址,因布局结构设计,不便于一次性复制这些数据,这时就需要一个复制按钮(小图标)进行操作。下面看看Angular工具里的Clipboard包应用。

复制是我们浏览页面或操作中常常使用的一种方法。双击、光标选择、Ctrl+A快捷全选等方法选中指定的文本内容执行Ctrl+C或右键复制到剪贴板。

在一定场景下,复制可能就比较麻烦,如,用户姓名、电话与联系地址,三条数据分散布局,不能够一次性将其复制或数据信息比较多,无法执行全选,这时,可能就需要一个按钮,通过点击直接将数据复制到剪贴板。

Angular工具包Clipboard剪贴板
Angular工具包Clipboard剪贴板

JavaScript中若要执行此方法,可能第一个想到的就是Document.execCommand('copy')方法或调用一些库去实现。

JavaScript中实现复制操作

创建一个input/textarea不可见文本框,将其脱离文档之外。执行方法选择复制。

const copyText = document.querySelector("#input");
copyText.select();
document.execCommand("copy");

CSS样式将其脱离文档不可见,如:

position: absolute;
left: -9999px;
opacity: 0;

这里要说的是不能使用display:none或属性hidden。

推荐使用Web API新方法,通过JavaScript访问系统剪贴板,可以查看这篇文章“剪贴板 navigator.clipboard API 异步读写”。

好了,不多说,下面看看Angular工具包中自带的Clipboard剪贴板。当然了,在Angular中执行上段代码也是可以的。只不过这个更为方便。

Angular中实现复制操作

同样,与上篇文章关于“通过 angular CDK 实现页面元素拖放”一样,首先在当前模块中导入。

import {ClipboardModule} from '@angular/cdk/clipboard';

在组件文档中,我们可以直接使用其cdkCopyToClipboard指令绑定所需复制的内容。

<button [cdkCopyToClipboard]="'点击按钮我即将被复制。'">复制</button>

点击按钮即可执行复制操作。粘贴将会输出:

// 输出: 点击按钮我即将被复制。

另外在点击事件上,可以在按钮上绑定点击事件,TS文件中:

<button (click)="copy()">点击复制</button>
// ...
import {Clipboard} from '@angular/cdk/clipboard';
// ...

constructor(
    private clipboard: Clipboard
) {}

/** 点击复制 */
copy() {
  this.clipboard.copy('复制这段文本');
}

// 则输出:复制这段文本

Clipboard服务将文本复制到用户的剪贴板。有两种方法copybeginCopy。少量文本我们直接可以使用copy方法;较长文本内容使用copy可能会复制失败,那么可能就需要使用beginCopy方法来处理,这个方法返回的是一个PendingCopy对象;另外注意的执行完后需要PendingCopy调用destroy将其清理。


Angular CDK 工具包 cdkCopyToClipboard Clipboard