使用新的 Angular Clipboard CDK 与剪贴板进行交互

helium -barbell (v9.0.0-next.1)版本带来了一个全新的 CDK 剪贴板模块，方便用户与剪贴板进行交互。本文将通过一些示例，探讨如何使用这个全新的 CDK。

组件开发工具包 (CDK) 是一套工具，它实现了常见的交互模式，但对其呈现方式却不做任何限定。它抽象了 Angular Material 库中的核心功能，但没有任何特定于 Material Design 的样式。您可以将 CDK 视为一个经过充分测试的功能空白状态，您可以在此基础上开发自己的定制组件。

导入`ClipboardModule`

使用CDK的第一步是导入formClipboardModule并将@angular/cdk/clipboard其添加到imports声明中。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ClipboardModule } from '@angular/cdk/clipboard'

import { AppComponent } from './app.component';

@NgModule({
  imports: [
    BrowserModule,
    ClipboardModule
  ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

使用`cdkCopyToClipboard`属性

导入完成后ClipboardModule，我们就可以开始了。
复制内容只需要cdkCopyToClipboard属性。
可以将其添加到任何元素，单击该元素时，内容会保存到剪贴板。

<button cdkCopyToClipboard="👋 You copied me!">Click to copy</button>

复制静态字符串很无聊，但我们也可以使用属性绑定来复制表达式的结果。

export class AppComponent {
  code = 'AAA-BBB-CCC'
}

<input disabled [value]="code" />
<button [cdkCopyToClipboard]="code">Copy coupon code</button>

更有趣的是将其绑定到我们可以修改内容的函数。

export class AppComponent {
  value = ''

  copy(value) {
    return `${value}\n\ncopied from timdeschryver.dev`;
  }
}

<textarea [(ngModel)]="value"></textarea>
<button [cdkCopyToClipboard]="copy(value)">Copy content</button>

使用`Clipboard`服务

使用该cdkCopyToClipboard属性可以让用户从页面复制内容，这很棒。
但是，它不允许我们（作为开发人员）以编程方式复制内容。这时，Clipboard服务就派上用场了。通过使用该copy(content)方法，我们可以将内容复制到剪贴板。

<button (click)="generateId()">Generate Id</button>

export class AppComponent {
  constructor(private clipboard: Clipboard) {}

  generateId() {
    const id = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
      const r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
      return v.toString(16);
   });

   this.clipboard.copy(id);

   alert(`Id "${id}" is generated and copied to the clipboard`);
  }
}

操场

实现细节

在内部，该方法PendingCopy用于将内容复制到剪贴板。该类在 DOM 中创建一个不可见的文本区域，并将内容作为其值。copy()使用该方法时，它会将焦点移至不可见的文本区域，并使用原生方法execCommand('copy')将内容复制到剪贴板。最后一步，它会重新聚焦先前选择的元素。

对于感兴趣的人，本机剪贴板 API还可以剪切内容并读取当前剪贴板值。

在 Twitter 上关注我@tim_deschryver | 最初发布于timdeschryver.dev。

文章来源：https://dev.to/angular/use-the-new-angular-clipboard-cdk-to-interact-with-the-clipboard-31o2

使用新的 Angular Clipboard CDK 与剪贴板进行交互

使用新的 Angular Clipboard CDK 与剪贴板进行交互

导入ClipboardModule

使用cdkCopyToClipboard属性

使用Clipboard服务

操场

实现细节

导入`ClipboardModule`

使用`cdkCopyToClipboard`属性

使用`Clipboard`服务