# Angular CDK 工具包 Clipboard 剪贴板
> Web页面中偶尔会使用到快捷复制功能操作，更常见的可能是后台数据管理项目中。如用户姓名、电话与地址，因布局结构设计，不便于一次性复制这些数据，这时就需要一个复制按钮（小图标）进行操作。下面看看Angular工具里的Clipboard包应用。
Author: DeathGhost
Published: 2020-12-22 22:08:08
Category: angular
Canonical: https://www.deathghost.cn/article/angular/87
Keywords: Angular, CDK, 工具包, cdkCopyToClipboard, Clipboard, copy, beginCopy, PendingCopy, destroy, 指令
复制是我们浏览页面或操作中常常使用的一种方法。双击、光标选择、Ctrl+A快捷全选等方法选中指定的文本内容执行Ctrl+C或右键复制到剪贴板。
在一定场景下，复制可能就比较麻烦，如，用户姓名、电话与联系地址，三条数据分散布局，不能够一次性将其复制或数据信息比较多，无法执行全选，这时，可能就需要一个按钮，通过点击直接将数据复制到剪贴板。
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 异步读写](https://www.deathghost.cn/article/javascript/89)”。
好了，不多说，下面看看Angular工具包中自带的Clipboard剪贴板。当然了，在Angular中执行上段代码也是可以的。只不过这个更为方便。
## Angular中实现复制操作
同样，与上篇文章关于“[通过 angular CDK 实现页面元素拖放](https://www.deathghost.cn/article/angular/46)”一样，首先在当前模块中导入。
import {ClipboardModule} from '@angular/cdk/clipboard';
在组件文档中，我们可以直接使用其cdkCopyToClipboard指令绑定所需复制的内容。
点击按钮即可执行复制操作。粘贴将会输出：
// 输出： 点击按钮我即将被复制。
另外在点击事件上，可以在按钮上绑定点击事件，TS文件中：
// ...
import {Clipboard} from '@angular/cdk/clipboard';
// ...
constructor(
private clipboard: Clipboard
) {}
/** 点击复制 */
copy() {
this.clipboard.copy('复制这段文本');
}
// 则输出：复制这段文本
Clipboard服务将文本复制到用户的剪贴板。有两种方法copy与beginCopy。少量文本我们直接可以使用copy方法；较长文本内容使用copy可能会复制失败，那么可能就需要使用beginCopy方法来处理，这个方法返回的是一个PendingCopy对象；另外注意的执行完后需要PendingCopy调用destroy将其清理。
## Related
- Previous: [Angular 组件交互 ngOnChanges 监听某一属性值变更](https://www.deathghost.cn/article/angular/82)
- Next: [Angular自定义预加载策略](https://www.deathghost.cn/article/angular/88)